前言：

webpack是一款专门为web前端而生的自动化打包工具，支持自定义打包，能把各种资源统一当做模块来处理。逐渐得到广大前端开发人员的青睐。

但是随着各种资源的不断增加，构建速度会越来越慢，为了提高构建速度，webpack提供了一个DLL插件。它可以把不经常变化的模块预先打包，然后生成一个manifest清单，并把预先打包好的模块生成一个包。其他变化频繁的模块可以通过清单文件指定的找到相应的依赖。就像windows的动态链接库（DLL）一样。

准备：

为了快快速开始，我们使用vue-cli生成一个脚手架

vue init webpack-simple dll

然后进入dll并安装依赖

cd dll

npm install

执行npm run dev启动项目

配置DLL插件：

首先建立一个webpack.dll.config.js配置文件，内容如下：

new webpack.DllPlugin({

context: __dirname,

path: path.join(__dirname, 'dist', 'vendor-manifest.json'),

name: 'vendor_library'

})

然后在webpack.config.js'中配置DLLReference:

plugins:[

new webpack.DllReferencePlujigin({

context: __dirname,

manifest: path.join(__dirname, 'dist', 'vendor-manifest.json')

})

]

接下来，我们构建vendor库：

webpack --config webpack.dll.config.js

这时我们将看到生成了两个文件在dist目录里面：vendor.dll.js和vendor-manifest.json

最后,我们构建应用：

npm run build

我们将看到，构建速度有了非常大的提升，原来需要10秒以上，现在只需要非常短的时间了！哦如果以来非常多，文件又比较大的时候，效果会更加明显！
本文实例已经托管在GitHub上：https://github.com/MillerRen/dll-demo