Webpack性能优化 DLL 用法详解

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')

module.exports = {
 entry: {
 vendors: ['react', 'lodash']
 },

 output: {
 filename: '[name].dll.js',
 path: 'dist/',
 library
 },

 plugins: [
 new webpack.DllPlugin({
  path: path.join(__dirname, 'dist/[name]-manifest.json'),
  // This must match the output.library option above
  name: library
 }),
 ],
}

const webpack = require('webpack')

module.exports = {
 entry: {
 app: './src/index'
 },
 output: {
 filename: 'app.bundle.js',
 path: 'dist/',
 },
 plugins: [
 new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./dist/vendors-manifest.json')
 })
 ]
}

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

<script src="/UploadFiles/2021-04-02/vendors.dll.js">

DLL Link Plugin
上面的用法也存在一些不方便的地方，比如在 webpack.config.js 中要明确指出对应的 manifest.json 文件。还有当 DLL 需要更新的时候，比如 react 升级了，或者加入新的第三方库，都需要手动像下面这样编译一次。


$ webpack --config webpack.dll.config.js


因为上面这些问题，所以基于官方的 DllReferencePlugin，我写了一个打包的插件，Dll Link Plugin。
使用这个插件，只需要对 webpack.config.js 作下小小的改动


const webpack = require('webpack')
const DllLinkPlugin = require('dll-link-webpack-plugin')

module.exports = {
 // ...
 plugins: [
 new DllLinkPlugin({
  config: require('webpack.dll.config.js')
 })
 ]
}




直接替换掉 DllReferencePlugin，然后传入对应的 DLL 配置文件就可以了。每次打包的时候，只需要运行


$ webpack --config webpack.config.js


上面的命令便会自动生成对应的 vendors 文件，需要更新的时候，也会自动更新。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。