利用DllPlugin性能优化

介绍

在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react，lodash，vue 我们希望能和自己的代码分离开，Webpack 社区有两种方案
CommonsChunkPlugin
DLLPlugin
对于 CommonsChunkPlugin，webpack 每次打包实际还是需要去处理这些第三方库，只是打包完之后，能把第三方库和我们自己的代码分开。而 DLLPlugin 则是能把第三方代码完全分离开，即每次只打包项目自身的代码。Dll这个概念是借鉴了Windows系统的dll，一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的

使用

添加配置文件

要使用 DLLPlugin，需要额外新建一个配置文件webpack.dll.js，该配置文件用来打包生成第三方库。
webpack.dll.js

const webpack = require('webpack')
const path = require('path')
module.exports = {
  mode: 'production',
  entry: {
    vendor: ['lodash'],
    react: ['react']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, './dll'),
    library: '[name]',
    // libraryTarget: 'umd' // 将入口文件的返回值以什么类型的方式导出，umd比较全，包括amd、cmd、window
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.join(__dirname, './dll/[name].manifest.json')
    })
  ]
}

然后运行 命令行运行"webpack --config webpack-dll.js"
生成打包后的文件

接下来就是，这么在业务代码里使用打包好的第三方模块的事情了。

修改配置文件webpack-common.js

关键代码如下：

const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
....
  plugins: [
    new AddAssetHtmlWebpackPlugin({//将打包好的dll文件挂载到html中
      filepath: path.resolve(__dirname, './dll/react.dll.js')
    }),
    new AddAssetHtmlWebpackPlugin({
      filepath: path.resolve(__dirname, './dll/vendor.dll.js')
    }),
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, './dll/vendor-manifest.json')
    }),
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, './dll/react-manifest.json')
    })
  ],

浏览器控制台，可以看到第三方模块，已经作为全局变量，引入到了入口文件中。

但是每次在webpack.dll.js新加第三方模块，都要在webpack-common.js里添加DllReferencePlugin等，比较麻烦，我们可以用node写一个文件循环，自己读取文件数量，自动修改plugin
关键代码如下：

const fs = require('fs')
const files = fs.readdirSync(path.resolve(__dirname, '../dll'));
const plugins = [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  }),
  new CleanWebpackPlugin(),
  new BundleAnalyzerPlugin(),
  new webpack.ProvidePlugin({
    _: 'lodash'
  }),
]
files.forEach(file => {
  if (/.*.dll.js/.test(file)) {
    plugins.push(new AddAssetHtmlWebpackPlugin({//将打包好的dll文件挂载到html中
      filepath: path.resolve(__dirname, '../dll', file)
    }))
  }
  if (/.*.manifest.json/.test(file)) {
    plugins.push(new webpack.DllReferencePlugin({//分析第三方模块是否已经在dll文件里，如果里面有就不用再node_modules在分析打包了
      manifest: path.resolve(__dirname, '../dll', file)
    }))
  }
})

总结整体流程

通过dllPlugin生成manifets.json和vendor.js，vendor.js会自执行返回一个加载函数vendor(名字可配置)，通过闭包将模块存储在内存中，注意vendor是一个全局变量。
webpack通过DllReferencePlugin在打包的时候分析业务代码中使用了哪些第三方模块，哪些模块是不需要打包进业务代码中，而是去vendor.js中获取。
vendor中获取的模块是通过调用全局函数vendor(id)来进行引入。

补充

CommonsChunkPlugin 插件每次打包的时候还是会去处理一些第三方依赖库，只是它能把第三方库文件和我们的代码分开掉，生成一个独立的js文件。但是它还是不能提高打包的速度。

DLLPlugin 它能把第三方库代码分离开，并且每次文件更改的时候，它只会打包该项目自身的代码。所以打包速度会更快。

DLLPlugin 这个插件是在一个额外独立的webpack设置中创建一个只有dll的bundle，也就是说我们在项目根目录下除了有webpack.config.js，还会新建一个webpack.dll.config.js文件。webpack.dll.config.js作用是把所有的第三方库依赖打包到一个bundle的dll文件里面，还会生成一个名为 manifest.json文件。
该manifest.json的作用是用来让 DllReferencePlugin 映射到相关的依赖上去的。

DllReferencePlugin 这个插件是在webpack.config.js中使用的，该插件的作用是把刚刚在webpack.dll.config.js中打包生成的dll文件引用到需要的预编译的依赖上来。什么意思呢？就是说在webpack.dll.config.js中打包后比如会生成 vendor.dll.js文件和vendor-manifest.json文件，vendor.dll.js文件包含所有的第三方库文件，vendor-manifest.json文件会包含所有库代码的一个索引，当在使用webpack.config.js文件打包DllReferencePlugin插件的时候，会使用该DllReferencePlugin插件读取vendor-manifest.json文件，看看是否有该第三方库。vendor-manifest.json文件就是有一个第三方库的一个映射而已。

所以说 第一次使用 webpack.dll.config.js 文件会对第三方库打包，打包完成后就不会再打包它了，然后每次运行 webpack.config.js文件的时候，都会打包项目中本身的文件代码，当需要使用第三方依赖的时候，会使用 DllReferencePlugin插件去读取第三方依赖库。所以说它的打包速度会得到一个很大的提升。