DllPlugin和DllReferencePlugin提供分離包的方式可以大大提高構(gòu)建時間性能。主要思想在于，將一些不做修改的依賴文件，提前打包，這樣我們開發(fā)代碼發(fā)布的時候就不需要再對這部分代碼進(jìn)行打包。從而節(jié)省了打包時間。
?

DllPlugin

這個插件使用一個單獨(dú)webpack配置創(chuàng)建一個dll-only-bundle文件。并且它還創(chuàng)建一個manifest.json。

DllReferencePlugin使用該json文件來做映射依賴性。（這個文件會告訴我們的哪些文件已經(jīng)提取打包好了）。

• context (可選): manifest文件中請求的上下文，默認(rèn)為該webpack文件上下文。
• name: 公開的dll函數(shù)的名稱，和output. library保持一致即可。
• path: manifest.json生成的文件夾及名字

e.g.:
new webpack.DllPlugin({
  context: __dirname,
  name: "[name]_[hash]",
  path: path.join(__dirname, "manifest.json"),
})

DllReferencePlugin

這個插件用于主webpack配置,它引用的dll-only-bundle(s)需要預(yù)先構(gòu)建的依賴關(guān)系。

• context: manifest文件中請求的上下文。
• manifest: DllPlugin插件生成的manifest.json
• content(可選): 請求的映射模塊id(默認(rèn)為manifest.content)
• name(可選): dll暴露的名稱
• scope(可選): 前綴用于訪問dll的內(nèi)容
• sourceType(可選): dll是如何暴露(libraryTarget)

e.g.:
new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require("./manifest.json"),
  name: "./my-dll.js",
  scope: "xyz",
  sourceType: "commonjs2"
})

在原來的打包配置文件基礎(chǔ)上面，我們需要新建一個webpack.dll.conf.js文件。

截圖

配置如下：

//webpack.dll.conf.js

const path = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
    vendor: [
    'vue/dist/vue.esm.js',
    'vue-router',
    'vuex',
    'babel-polyfill' //提前打包一些基本不怎么修改的文件
    ]
  },
  output: {
    path: path.join(__dirname, '../static/js'), //放在項目的static/js目錄下面
    filename: '[name].dll.js', //打包文件的名字
    library: '[name]_library' //可選 暴露出的全局變量名
    // vendor.dll.js中暴露出的全局變量名。
    // 主要是給DllPlugin中的name使用，
    // 故這里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'), //生成上文說到清單文件，放在當(dāng)前build文件下面，這個看你自己想放哪里了。
      name: '[name]_library'
    }),  
    //壓縮 只是為了包更小一點(diǎn) 
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        drop_console:true,
        drop_debugger:true
      },
      output:{
        // 去掉注釋內(nèi)容
        comments: false,
      },
      sourceMap: true
    })
  ]
};

在webpack.pro.conf.js文件需要做如下修改，在plugins下面加入如果代碼：add-asset-html-webpack-plugin

 const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

  new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'), 
      manifest: require('./vendor-manifest.json')
    }),
    //這個主要是將生成的vendor.dll.js文件加上hash值插入到頁面中。
    new AddAssetHtmlPlugin([{
      filepath: path.resolve(__dirname,'../dist/static/js/vendor.dll.js'),
      outputPath: utils.assetsPath('js'),
      publicPath: path.posix.join(config.build.assetsPublicPath, 'static/js'),
      includeSourcemap: false,
      hash: true,
    }]),

package.json

執(zhí)行

npm run build:dll  //這個命令在最初執(zhí)行一次之后，之后發(fā)布都不需要再重復(fù)執(zhí)行了，除非webpack.dll.conf.js里面的依賴文件有升級。
//發(fā)布之前的打包
npm run build 

index文件里面多了一個vendor.dll.js并且后面加了hash

至此，DllPlugin插件優(yōu)化打包完成，項目打包時間減少了一半。還有一種提升速度的優(yōu)化方式是HappyPack。

基本原理： HappyPack 允許 Webpack 使用 Node 多線程進(jìn)行構(gòu)建來提升構(gòu)建的速度。

//wepack.base.conf.js

let HappyPack = require('happypack');
let os = require('os');
let happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

  plugins: [
    new HappyPack({
      id: 'js',
      threadPool: happyThreadPool,
      loaders: [ 'babel-loader' ]
    }),
    new HappyPack({
      id: 'styles',
      threadPool: happyThreadPool,
      loaders: [ 'style-loader', 'css-loader', 'less-loader' ]
    })
  ]
  
  rules:[
      {
        test: /\.js$/,
        loader: 'happypack/loader?id=js',
        exclude: /node_modules/,
        include: [...]
      },
      {
        test: /\.less$/,
        loader: 'happypack/loader?id=styles',
        exclude: /node_modules/,
        include: [...]
      }    
  ]

配置也很簡單，但實際的構(gòu)建速度并沒有覺得提高，反而覺得有點(diǎn)變慢。。。。。。

學(xué)習(xí)地址： https://webpack.js.org/plugins/dll-plugin/