webpack篇之三（DllPlugin和DllReferencePlugin）

一、先说作用

主要将第三方库抽离成动态库，比如echart、iview等。
解决了两个问题：
1、本身这部分依赖的第三方库变动小，分离以后无需每次都编译，提高编译速度。
2、降低原来第三方包的大小，比如vendors。
DllPlugin：负责抽离第三方库，形成第三方动态库dll。
DllReferencePlugin：负责引用第三方库。

二、DllPlugin 使用

1. 创建webpack.dll.config.js

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
 // 入口文件
 entry: {
   // 项目中用到的依赖库文件
   echartsbt: ['echarts']
 },
 // 输出文件
 output: {
   // 文件名称
   filename: '[name].dll.js',
   // 将输出的文件放到dist的lib目录下
   path: path.resolve(__dirname, 'lib'),

   /*
    存放相关的dll文件的全局变量名称，比如对于jquery来说的话就是 _dll_jquery, 在前面加 _dll
    是为了防止全局变量冲突。
   */
   library: '_dll_[name]'
 },
 plugins: [
   // 使用插件 DllPlugin
   new DllPlugin({
     /*
      该插件的name属性值需要和 output.library保存一致，该字段值，也就是输出的 manifest.json文件中name字段的值。
      比如在jquery.manifest文件中有 name: '_dll_jquery'
     */
     name: '_dll_[name]',

     /* 生成manifest文件输出的位置和文件名称 */
     path: path.join(__dirname, 'lib/', '[name].manifest.json')
   })
 ]
};

说明：
1、manifest.json是记录包的依赖映射关系，主要提供给vue.config.js使用。
第一次使用 webpack.dll.config.js 文件会对第三方库打包，打包完成后就不会再打包它了，然后每次运行 webpack.config.js文件的时候，都会打包项目中本身的文件代码，当需要使用第三方依赖的时候，会使用 DllReferencePlugin插件去读取第三方依赖库。所以说它的打包速度会得到一个很大的提升。

三、DllReferencePlugin 使用

1. 引用

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

2. 使用

   // 告诉webpack使用了哪些第三方库代码
     new DllReferencePlugin({
       // echarts 映射到json文件上去
       manifest: require('./lib/echartsbt.manifest.json')
     }),

说明：
1、告知项目，第三方包的打包情况。根据应用情况剥离第三方包。

四、总结

使用了DllPlugin和DllReferencePlugin，只是将第三方包进行打包成动态库。