Webpack DllPlugin 和 DllReferencePlugin

1.插件的作用

是一种分包的解决方案，它能够将部份代码抽出来，零丁构成一个插件包，相似windows体系中的dll包.

2.插件的用处

由于插件的作用是星散代码，所以常用在代码中做大众代码的抽离，比方React中能够把大众的模块【react , react dom等等】

3.上风

1.你能够从你的application 中星散出一个library，当你运用webpack 的w –watch形式，那末你修正除了library之外的文件，将会异常的疾速。

2.当用户修正代码，只须要修正他们所转变的部份，这关于热更新来说是件功德

3.能够将部份雷同作用的包合并起来，轻易保护开辟

4.加载体式格局

运用dll：这个时刻会多打一个library包，就是这里的Child vendor，他有738KB，
建立运用了1320ms

这里的重要文件则变的异常小，建立运用了237ms

当你修正了重要文件，那末你只须要从新编译重要文件中你修正的部份,如许会异常快，这里只运用15ms。

没运用dll：

你会发明这个时刻，pageA和pageB都异常的大，由于他们都require了一个很大的包，
而运用了dll，则将这个大包抽离出来成为一个。建立运用了1412ms

这里仅仅修正一点东西，却发明要回从新编译739kb的东西，这里仅仅是一个小文件，假如是一个大文件，那末将会异常的耗时，这里运用了62ms，那末假如文件很大的状况，将会异常影响build的速率。

上图中，运用dll，那末他会将一些不须要频仍修正的文件编译成一个library包，那末一切运用到该library的文件大小都邑大幅度的下落，以后修正文件后的编译速率将会异常的快。
假如是在手机app开辟中，便能够将频仍修正的文件和不频仍修正的文件星散，如许每次更新只须要替代部份的包。

5.代码完成

源码地点

文件目次

|-dist
|--dll
|---天生文件的位置
|-pageA.js
|-pageB.js
|-pageC.js
|-vendor.js
|-vendor2.js
|-webpack.config.dll.js
|-package.json

/* eslint import/no-extraneous-dependencies: ["off"] */
const path = require('path');
const webpack = require('webpack');

// 文件的输出目次
const STATIC_SRC = 'dist';
// 文件输出的文件夹
const OUTPUT_PATH = 'dll';
// 掌握是不是开启星散形式


const main = [
  {
    name: 'vendor',
    // 这里是须要打包成library包的文件进口
    entry: [
      './vendor.js', './vendor2.js', 'react', 'react-dom'
    ],
    // 打包后的输出位置和输出名字
    output: {
      path: path.resolve(__dirname, STATIC_SRC, OUTPUT_PATH),
      filename: 'vendor.js',
      library: 'vendor_[hash]'
    },
    plugins: [new webpack.DllPlugin({
      name: 'vendor_[hash]',
      //这里的文件输出文件须要和DllReferencePlugin保持一致
      path: path.resolve(__dirname, STATIC_SRC, OUTPUT_PATH, 'manifest.json')
    })],
  },
  {
    name: 'app',
    dependencies: ['vendor'],
    entry: {
      pageA: './pageA',
      pageB: './pageB',
      pageC: './pageC'
    },
    output: {
      path: path.resolve(__dirname, STATIC_SRC, OUTPUT_PATH),
      filename: '[name].js'
    },
    plugins:  [ new webpack.DllReferencePlugin({
      // 这里须要保证途径与DllPlugin中天生的manifest途径一致，不然报错
      manifest: path.resolve(__dirname, STATIC_SRC, OUTPUT_PATH, 'manifest.json')
    })]
  }
];
module.exports = main;

参考

Optimizing Webpack build times and improving caching with DLL bundles

webpack 官方文档