優化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) => {  2     return {  3  plugins: [  4             new CompressionWebpackPlugin({  5                 test: /\.js$|\.html$|\.css/, //匹配文件名
                threshold: 9040,  //對超過9040KB的文件進行壓縮
                // deleteOriginalAssets: false //是否刪除源文件
 }),  9  ], 10  } 11 },

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配置

{ 2       test: /\.(js|jsx)$/, 3       loader: 'babel-loader', 4       exclude: /node_modules/, 5       include: [resolve('src'), resolve('test')] 6       options: {plugins: ['lodash']} 7 } 8         

5、切割代碼，合並共用模塊

　　webpack4已經廢棄了CommonsChunksplugin，改用了splitChunks。這個我也不是很了解，具體參數可查看官網。

configureWebpack: (config) => {  2  optimization: {  3  splitChunks: {  4  cacheGroups: {  5  vendor: {  6                         priority: 10, //添加權重
                        test: /node_modules/, //把這個目錄下符合下面幾個條件的庫抽離出來
                        name: "vendor",  9                         enforce: true
 }, 11  common: { 12                         //公共的模塊
                        chunks: 'all', 14                         minChunks: 2 // 拆分前必須共享模塊的最小塊數
 } 16  }, 17                 chunks:"all", 18                 minSize: 400000
 } 20  }, 21  } 22 },

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) => {  2     return {  3  plugins: [  4             new HtmlWebpackPlugin({  5                 template: './public/index.html',  6                 hash: true, // 是否為所有注入的靜態資源添加webpack每次編譯產生的唯一hash值
                inject: true // 向template或者templateContent中注入所有靜態資源，不同的配置值注入的位置不經相同
 })  9  ], 10  } 11 },

之前都沒試過親自配置webpack，花了好長時間，也才了好多坑，繼續努力。