dllPlugin使用场景

• 由于多人开发项目，引入的第三方库特别多，导致项目过于臃肿，而第三方库不经常变更，所以需要dllPlugin生成dll文件保证在运行时，不需要反复打包

测速工具

• 建议使用speed-measure-webpack-plugin 进行测速

dllPlugin

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

configureWebpack: smp.wrap({
  plugins: [
    new DllReferencePlugin({
        manifest: require('./dist/vue-manifest.json'),
      }),
      new DllReferencePlugin({
        manifest: require('./dist/ui-manifest.json'),
      }),
  ]
}),

步骤一

在项目根目录新建webpack.dll.config.js

  以下仅为缩略版，自行百度，此处仅提注意事项
   1.entry入口的 参数 需为第三方库，而不是sass-loader这种在node环境下转换器
  entry: {
    vue: ['vuex', 'vue-router', 'axios'],
    ui: ['element-ui'],
  },
  2. output出口 需要与打包出口一致，如vue-cli默认是dist目录,为了美观我单独多一个dll目录存放
  output: {
    filename: '[name].dll.js',
    path: path.resolve('dist/dll'),
    library: '[name]_dll_[fullhash]'
  },
  3. 此处需生成dllPlugin文件
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dist', '[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
  

步骤二

自动生成dll文件

scripts:{
	"dll":"webpack --config webpack.dll.config.js"
}

步骤三

在pulic文件引入，或者使用html-webpack-plugin 引入，我这边为了偷懒就直接引入了

配合多进程的happyPack

happyPack

• happyPack是利用多进程去提高node能力，用到os模块，但是随着webpack4，webpack5的推出，已经默认使用多进程去解析代码，所以我觉得 也快推出历史舞台了

• 下次有机会我也玩玩thread-loader ,持续学习中， 说实话dllPlugin真的香