webpack DllPlugin插件

DllPlugin、CommonsChunkPlugin插件

运用webpack打包项目时，通常会提取第三方不经常更改的库到一个vendor里面，业务代码另行处理，但如果是用CommonsChunkPlugin插件来做的话，存在每次打包打到第三方库的vendor的hash也会改变，这样每次发版hash变了，客服端强缓存就失效了，本无改变的代码，hash也变，这跟莽荒时代静态文件全局统一版本号有什么区别呢，并且每次都要重新构建一遍，大大增加了降低了构建效率。打包慢～。这里就有了DllPlugin插件，它需要单独对其配置，然后再webpack.config里面通过new webpack.DllReferencePlugin引入，具体配置如下

官方链接

const webpack = require('webpack')
const path = require('path')
module.exports = function (env = {}) {
  const outputPath = path.resolve(__dirname, env.production ? 'build' : 'dev')
  return {
    entry: {
      vendor: [ 'vue', 'vuex', 'vue-resource', 'vue-router', 'vue-cookie']
    },
    output: {
      filename: '[name].js',
      path: outputPath,
      library: '[name]_vendor'
    },
    plugins: [
      new webpack.DllPlugin({
        name: '[name]_vendor',
        path: path.join(outputPath, '[name]-manifest.json')
      })
    ]
  }
}

对应去到webpack.config.js调用

  plugins: [
  new webpack.DllReferencePlugin({
    manifest: require(`./${env.production ? 'build' : 'dev'}/vendor-manifest.json`)
  })
]

CommonsChunk每次构建时都需要执行一次，耗时，DllPlugin把第三方库的构建前置了，提高了构建效率，目前index.html要去写script标签引入，html-webpack-plugin不能动态写入，好像有个assets-webpack-plugin插件可以配合着使用，待有空研究～,如下：

assets-webpack-plugin插件

官方链接

此插件结合上面插件使用在html里面使用<%= htmlWebpackPlugin.options.vendorName %>这种变量,安装npm install –save-dev assets-webpack-plugin

const AssetsPlugin = require('assets-webpack-plugin')
plugins: [
    new webpack.DllPlugin({
      name: '[name]_vendor',
      path: path.join(outputPath, '[name]-manifest.json')
    }),
    new AssetsPlugin({
      filename: 'vendor-config.json', 
      path: '/'
    })
]
//对应去到webpack.config.js的html-webpack-plugin插件
const vendorConfig = require('vendor-config.json')
plugins: [
  new HtmlwebpackPlugin({
    //参数自取 用于html页面的
    vendorName: vendorConfig.vendor.js
  })
]