詳解Webpack DLL用法以及功能

2019-11-19 16:06:26

字體：大中小

來源：轉載

供稿：網友

在使用webpack過程中，本人也發現發現構建速度非常慢，Webpack性能優化的方式有很多種，本文介紹了dll，dll是一種最簡單粗暴并且極其有效的優化方式。

前言

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