Webpack性能優化 DLL 用法詳解

2019-11-19 15:50:43

字體：大中小

來源：轉載

供稿：網友

前言

在用 Webpack 打包的時候，對于一些不經常更新的第三方庫，比如 react，lodash，我們希望能和自己的代碼分離開，Webpack 社區有兩種方案

CommonsChunkPlugin
DLLPlugin

對于 CommonsChunkPlugin，webpack 每次打包實際還是需要去處理這些第三方庫，只是打包完之后，能把第三方庫和我們自己的代碼分開。而DLLPlugin 則是能把第三方代碼完全分離開，即每次只打包項目自身的代碼。

用法

要使用 DLLPlugin，需要額外新建一個配置文件。所以對于用這種方式打包的項目，一般會有下面兩個配置文件

webpack.config.js
webpack.dll.config.js

先來看下 webpack.dll.config.js

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

再改下 webpack.config.js 文件

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

manifest: require('./dist/vendors-manifest.json') 這里的路徑要和 webpack.dll.config.js 里面的對應。

然后運行

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

然后你的 html 文件像下面這樣引用

<script src="/dist/vendors.dll.js"></script><script src="/dist/app.bundle.js"></script>

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 配置文件就可以了。每次打包的時候，只需要運行