webpack打包速度大幅度提升的方法

前言：我們開發中經常會遇見這樣一個問題，每次webpack打包，都會重復的打包引入node_modules中的代碼，都會極大的占用webpack打包的速度，我們可以這樣的處理，將node_modules中這些不變的代碼提前打包一次，因為node_modules中代碼不會改變，所以以后直接把這個提前打包的js文件引入項目，以后打包就不用打包node_modules，項目打包速度得到極大提升。

1、准備工作

yarn add add-asset-html-webpack-plugin   //引入第一次構建的dll.js文件使用.

2、在項目build目錄下新建wepback.dll.js

const path = require('path');
const webpack = require('webpack');
module.exports = {
    entry: {
        venders: ['react', 'react-dom']   //這是我的demo項目，所以只引入了這兩個插件，你們可以把node_modules中的插件全部引入
    },
    output: {
        filename: '[name].dll.js',
        path: path.resolve(__dirname, '../dll'),
        library: '[name]'    //打包生成插件，在瀏覽器console中可以直接調用這個函數
    },
    plugins: [
        new webpack.DllPlugin({
            name: '[name]',
            path: path.resolve(__dirname, "../dll/[name].mainfest.json")  //這個是生成的venders.dll.js與node_modules中模塊映射關系,如果有就不打包node_modules中的模塊，直接使用全局變量中的模塊
        })
    ]
}

3、package.json中添加以下命令，並運行 yarn build:dll

  "scripts": {
    "build:dll": "webpack --env production --config ./build/webpack.dll.js"
  },

4、項目中使用webpack.dll.js的模塊,而不是打包重新引入

const path = require('path');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
    plugins: [
        new AddAssetHtmlPlugin({ filepath: require.resolve('../dll/venders.dll.js') }),
        new webpack.DllReferencePlugin({
            manifest: path.resolve(__dirname, '../dll/venders.mainfest.json')
        })
    ]
}

重新打包試下，項目打包速度瞬間是不是上去了