webpack提高打包速度

通過使用插件和配置插件的參數。

1. 打包速度分析

首先通過speed-measure-webpack-plugin分析打包的各個插件和loader的耗時。然后具體問題，具體分析。

按照插件

npm install --save-dev speed-measure-webpack-plugin

使用時該插件需要將整個配置對象包裹

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');

const smp = new SpeedMeasureWebpackPlugin();

module.exports = smp.wrap(smart(base, {
  //...
}));

2 啟動js壓縮插件的並行和緩存配置

webpack中對js進行壓縮的插件是terser-webpack-plugin。

const TerserWebpackPlugin = require('terser-webpack-plugin');
optimization: {
   minimizer: [
     new TerserWebpackPlugin({
        parallel: true,  // 啟用並行壓縮
        cache: true,    // 啟用緩存
     })
   ]
}

3.合理使用hash值修改文件名

首先，了解三種hash的概念

1. hash 
每次編譯生成一個hash值。如果所有的文件都無變化，則hash值不變；如果有任何一個文件發生變化，hash值改變。所有的使用hash的文件名，hash值相同。
2. chunkhash
針對入口文件相關的模塊的hash變化，如果入口對應的模塊發生變化，hash值改變，為改變的入口依賴模塊，hash不變。每個文件的hash不同。
3. contenthash
按照內容生成hash值。

為了更好的使用緩存，使用contenthash值。

❎當開發模式下，設置devServer的hot：true時，默認調用webpack.HotModuleReplacementPlugin插件。此時不允許使用[contenthash],可以使用[hash]。

// output中使用contenthash  
output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[contenthash].js', //name是入口對應的key，無可以,默認main
  }
// css文件的contenthash
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    })

4. module.noParse

對於引入的大型第三方庫，不需要將其解析成語法樹來解析依賴，提高構建速度。被定義在該配置中的模塊中，不能調用import/require/define等引入機制。

  module: {
    noParse: /lodash|jquery/,

5. 動態鏈接庫dll

可以極大的提高打包/編譯速度。

1. 生成dll文件

首先使用DllPlugin生成一個dll文件，需要配置一個單獨的webpack.dll.config.js文件

const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'none',
  entry: {
    react: ['react', 'react-dom']
  },
  output: {
    filename: '[name].dll.js',
    path: path.join(__dirname, 'dist'),
    library: '_dll_[name]',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '_dll_[name]',// 名字必須和outputli.brary一直
      path: path.join(__dirname, 'manifest.json')
    })
  ]
}

package.json中配置腳本命令，生成dll文件

  "scripts": {
    "dll": "webpack --config webpack.dll.config.js"
  }

2. 使用DllReferencePlugin配置mainfest映射

在webpack.config.js中添加插件

    new webpack.DllReferencePlugin({
      // 建立索引
      manifest: path.resolve(__dirname, 'manifest.json'),
    }),
    new CleanWebpackPlugin({
      // 每次只清空非dll的文件，保留dll文件
      cleanOnceBeforeBuildPatterns: ['**/*','!react.dll.js'],
    }),

3. dll包引入html文件

devServer的contentBase設為./dist時，相對路徑設置如下

<script src="../react.dll.js"></script>