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')
        })
    ]
}

重新打包试下，项目打包速度和项目体积都有了显著的优化

 react 可以参考下我的这篇文章

https://www.cnblogs.com/uimeigui/p/15841871.html