四时宝库

作用： 直接引用打包好的第三方包， 不用每次再打包

假设项目中使用了 vue, vue-router, element-ui

首先需要创建 webpack.dll.conf.js：

const path = require('path')
const webpack = require('webpack')
module.exports = {
 entry: {
 vue: ['vue', 'vue-router'],
 ui: ['element-ui']
 },
 output: {
 path: path.join(__dirname, '../src/dll'),
 filename: '[name].dll.js',
 library: '[name]'
 },
 plugins: [
 new webpack.DllPlugin({
 path: path.join(__dirname, '../src/dll', '[name]-manifest.json'),
 name: '[name]'
 }),
 new webpack.optimize.UglifyJsPlugin()
 ]
}

然后 webpack --config ./build/webpack.dll.conf.js 打包：

上述是打包好后的代码，如何使用呢？

使用 DllReferencePlugin

在 build/webpack.config.js 中添加下列插件：

打包结果：

实测打包时间为原来的四分之一，当然项目大可能没这么明显，但是效果是显著的。