优化webpack4配置，加快页面访问时间

一、问题

　　在测试环境打开项目代码只需要1s左右，但在正式环境则要12s左右才能打开页面，这么慢才响应真的让人很恼火，虽然网络肯定有很大原因，但前端代码加载也是着实要优化才行。

　　我看了一下浏览器开发者工具，发现前端把整个项目的代码文件都加载了，我也是醉了（因为这个项目我只是接手同事的），最大问题就是在这里了。

　　

　　代码优化固然很重要，但耗时很久，只能优化webpack打包代码了。

二、解决过程

　　在这个项目里，我没看到webpack的配置文件，只能通过改 vue.config.js 文件，详细的参数可以在网上找。

1、删除map文件

　　这个虽然对访问页面没有很大的效果，查了一下，打包的时候有这个文件是存在安全隐患的，然后就果然设置参数删除掉。

productionSourceMap: false,  // 不生成map文件，减轻文件大小

　　参数是在 vue.config.js 文件设置的，打包构建后，构建的文件夹压缩包大小减少了一半。

2、异步加载组件

　　我看到同事很多组件都是用input同步加载的，这样感觉也会拖延时间，所以统一改成了异步加载组件

 // 同步加载
import Information from '@/components/rfmModel/basicInformation.vue';

 // 异步加载
const Information= () => import('@/components/rfmModel/basicInformation.vue');

3、开启gzip压缩

　　打包的时候压缩可以减少体积。

（1）安装

npm install compression-webpack-plugin -D

（2）在vue.config.js中有个 configureWebpack 参数，在 configureWebpack 返回的对象中，对象属性 plugins 数组 添加插件

const CompressionWebpackPlugin = require("compression-webpack-plugin");

configureWebpack: (config) => { 
    return {
        plugins: [
            new CompressionWebpackPlugin({
                test: /.js$|.html$|.css/, //匹配文件名
                threshold: 9040,  //对超过9040KB的文件进行压缩
                // deleteOriginalAssets: false //是否删除源文件
            }),
        ],
    }
},

4、按需引入

　　lodash-webpack-plugin与babel-plugin-lodash结合使用，但配置完这个，我上面的问题还是没有解决。

（1）安装

npm i -S lodash-webpack-plugin babel-plugin-lodash

（2）配置

var LodashModuleReplacementPlugin = require('lodash-webpack-plugin')

configureWebpack: (config) => { 
        return {
            plugins: [
                new LodashModuleReplacementPlugin(),
            ],
       }
}

至于babel-plugin-lodash，我看到项目文档导出来的webpack配置是已经配好了，查了一下，有两种配置方法：

①.babelrc中配置 “plugins”: [“transform-runtime”,“transform-vue-jsx”,“lodash”]

②在rules配置

{
      test: /.(js|jsx)$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      include: [resolve('src'), resolve('test')]
      options: {plugins: ['lodash']}
}
        

5、切割代码，合并共用模块

　　webpack4已经废弃了CommonsChunksplugin，改用了splitChunks。这个我也不是很了解，具体参数可查看官网。

configureWebpack: (config) => {  
        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        priority: 10, //添加权重
                        test: /node_modules/, //把这个目录下符合下面几个条件的库抽离出来
                        name: "vendor",
                        enforce: true
                    },
                    common: {
                        //公共的模块
                        chunks: 'all',
                        minChunks: 2 // 拆分前必须共享模块的最小块数
                    }
                },
                chunks:"all", 
                minSize: 400000
            }
        },
    }
},

6、html-webpack-plugin

　　这个是解决我上面加载全部代码文件的问题，查了一下，它的主要作用：

①为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题

②可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

　　似乎与我上面的问题一点关系也没有，但它解决了我的苦恼，天啊，这是为什么啊！！！

（1）安装

npm i -S html-webpack-plugin

（2）配置

let HtmlWebpackPlugin = require('html-webpack-plugin');

configureWebpack: (config) => {  
    return {
        plugins: [
            new HtmlWebpackPlugin({
                template: './public/index.html',
                hash: true, // 是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
                inject: true // 向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同
            })
        ],
    }
},

之前都没试过亲自配置webpack，花了好长时间，也才了好多坑，继续努力。