经常打包的前端会发现，很多时候，我们为了修复某些bug（如 promise 在 ie Safari 下的 bug），而新引入了一个 polyfill，然而，打包完后发现，vendor 的 hash 值变了，而整个 vendor 只新加了一个 es6-promise 的依赖，但是付出的代价就是，需要抛弃之前打包好的 vendor，用户重新访问时，需要再一次拉取一个全新的 vendor，这个代价就有点大了。
这时候，使用 dllPlugin 打包就有优势了。它可以将一些基础依赖模块统一先打包起来，当正式打包时，则可以略过这些模块，不再重复打包进去 vendor，提高打包速度的同时也能减少 vendor 的体积。
如，后台管理系统基础模块基本有以下几个：
axios： ajax 请求。
vuex： 全局状态管理。
js-cookie： 前端处理 cookie
vue-router： 路由管理。
这四个基础模块几乎是必须的，那么可以先提取出来。
step 1 打包基础模块
先在 build 文件夹下新建一个用于打包 dll 的配置文件 webpack.dll.conf.js：
const webpack = require('webpack'); const path = require('path'); const vueLoaderConfig = require('./vue-loader.conf') const utils = require('./utils') function resolve(dir) { return path.join(__dirname, '..', dir) } const vendor = [ // 'vue/dist/vue.runtime.esm.js', // 由于 vue 在生产环境中使用的是 cdn 引入，所以也无需提前打包进 dll // 'raven-js', // 前端监控，若无此需求，可以忽略。 'es6-promise', // 修复 promise 中某些 bug。 'vue-router', 'js-cookie', 'axios', 'vuex', ]; const webpackConfig = { context: __dirname, output: { path: path.join(__dirname, '../static/js/'), filename: '[name].dll.js', library: '[name]_[hash]', }, entry: { vendor }, plugins: [ new webpack.DllPlugin({ context: __dirname, path: path.join(__dirname, '.', '[name]-manifest.json'), name: '[name]_[hash]', }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, sourceMap: true, // parallel: true }) ], module: { rules: [{ test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] } }; module.exports = webpackConfig
然后在 package.json 中加入一条命令：
{ "scripts": { ... "build:dll": "webpack --config build/webpack.dll.conf.js", ... } }
执行 yarn build:dll 或者 npm run build:dll 即可完成打包 dll。执行完成后：
yarn build:dll yarn run v1.5.1 $ webpack --config build/webpack.dll.conf.js Hash: f6894dff019b2e0734af Version: webpack 3.10.0 Time: 1295ms Asset Size Chunks Chunk Names vendor.dll.js 62.6 kB 0 [emitted] vendor [8] dll vendor 12 bytes {0} [built] + 32 hidden modules ✨ Done in 1.89s.
同时，可以在 build 目录下，找到各个模块对应关系文件 vendors-manifest.json 和 static/js 下的 vendor.dll.js。
step 2 页面中引入 vendor
打包后的 dll 文件需要手动在 index.html 引入：
<div></div> <!-- built files will be auto injected --> <script src="https://www.jb51.net/static/js/vendors.dll.js"></script>
step 3 告诉 webpack 使用 dllPlugin 进行打包
修改 build/webpack.prod.conf.js:
module.exports = { plugins: [ ... new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./vendor-manifest.json') }), ... ] }
再次打包：
$ yarn build:report yarn run v1.5.1 $ npm_config_report=true node build/build.js Hash: b4ff51852866ed865cfd Version: webpack 3.10.0 Time: 6532ms Asset Size Chunks Chunk Names static/js/manifest.42b9584a653aec2b9c5e.js 1.5 kB 5 [emitted] manifest static/img/404.a57b6f3.png 98.1 kB [emitted] static/js/1.9e4133a25808e2101dd3.js 1 kB 1 [emitted] static/js/2.2a8a8e01c51473fab882.js 4.34 kB 2 [emitted] static/js/vendor.c7b076ef3341d4711402.js 39.4 kB 3 [emitted] vendor static/js/app.6d52c7a5bf1bacb5cc85.js 21.4 kB 4 [emitted] app static/js/0.cbc645864aab28ae8055.js 15.3 kB 0 [emitted] static/css/app.1b30f8eba210e245a5f96d7bf0d6fb6c.css 7.6 kB 4 [emitted] app favicon.ico 67.6 kB [emitted] index.html 986 bytes [emitted] static/js/vendor.dll.js 62.6 kB [emitted] Build complete. Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.
发现 vendor 现在只有 40k 的体积，减少了一半的体积，而且打包速度也快了 2s，而相对于最开始的基础模板，打包速度快了 12s，这是很让人欣慰。
后记