DllPlugin - 打包性能优化点

背景

• 很多时候我们在开发业务代码的时候多多少少都引入了其他的第三方库，如 lodash.js , axios.js 等，那么在打包的时候呢每次打包就会重新打包这些引入的第三方库，那有没有办法让打包的时候能预先让这些第三方库打包好然后每次打包业务代码遇到引入第三方库的时候直接使用已打包好的第三方库的打包文件呢？那当然是有的啦！DllPlugin 作为提升打包性能的重要一环，同学们一定要认真掌握哦。

Demo

• 假设我们要打包的入口文件长这样：

// 现在我们引入像 react, react-dom, lodash 这样的第三方库

import React from 'react';
import ReactDom from 'react-dom';
import _ from 'lodash';

const App = () => <>{_.join(['This', 'is', 'vern'], ' ')};

ReactDom.render(, document.getElementById('root'));

那么当我们执行 yarn build 进行代码打包的时候，每次都会/node_modules/中找寻相关依赖进行打包，现在我们使用 DllPlugin插件先打包引入的第三库，实现我们最初的预想：

// 首先新建一个 webpack.dll.js 文件

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

module.exports = {
  mode: 'production',
  entry: {
    lodash: ['lodash'],
    react: ['react', 'react-dom']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, '../dll'),
    library: '[name]',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, '../dll/[name].manifest.json')
    })
  ]
}
// 可以看到使用 webpack.DllPlugin({}) 插件主要是做一份打包文件的映射

然后我们执行打包命令： webpack --config ./webpack.dll.js
于是会生成如下4个文件：

ok，第三库方已经打包完成了，接下来就应该是让我们的项目每次打包都能自动引入我们打包好的第三方库，这里我们会使用到 add-asset-html-webpack-plugin 这个插件，所以同学们需要自行安装一下（ yarn add / npm install --save ）
接着我们引入这个插件 const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin') , 然后我们在主入口文件 webpack.config.js 中的 plugins 中使用它：

plugins: [
  new AddAssetHtmlWebpackPlugin({
    filepath: path.resolve(__dirname, '../dll/react.dll.js')
  }),
  new AddAssetHtmlWebpackPlugin({
    filepath: path.resolve(__dirname, '../dll/lodash.dll.js')
  }),
  // 此外我们还需再用这个插件让项目在打包的过程中能识别代码中引入的已经被打包的第三方库文件
  new webpack.DllReferencePlugin({
    manifest: path.resolve(__dirname, '../dll', file)
  })
]

配置好以上插件后，我们使用 devServer 运行我们的 demo：

可以看到自动引入了打包好的第三方库同时执行生产环境打包操作的时候打包时间会有比较明显的缩短，由于我的 demo 里做了许多比较消耗性能的操作，这里就不上图了，综上我们的性能优化点也就算是讲完啦。

总结

1. 使用 DllPlugin 插件打包项目中引入的第三方库
2. 使用 add-asset-html-webpack-plugin 插件帮助我们在项目中自动引入他们
3. 使用 DllReferencePlugin 插件保证项目在执行打包操作能正确识别已经被打包的第三方库从而直接使用它而不会再次打包，当项目变得庞大，引入大量额外的第三方库的时候，这个插件作为性能优化点的重要性就会变得非常重要，你 get 了吗？