Webpack DllPlugin 和 DllReferencePlugin

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 官方文檔