记录webpack4升级webpack5 以及性能优化

升级项目vue脚手架

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

去webpack5官方文档查看如何应对更新出现的问题（运行报错，构建报错，api更替......）

webpack.docschina.org/migrate/5/#…

打包构建包体积分析 BundleAnalyzerPlugin

new BundleAnalyzerPlugin({ analyzerMode: 'static' })

打包速度分析 SpeadMeasureWebpackPlugin

thread-loader 多进程 仅对于耗时任务开启效果更好 （vuecli已封装 parallel: true）

webpack分包 DllPlugin

创建分包配置文件 增加指令 'dll':'webpack --config webpack.dll.config.js'

const path = require('path')

const webpack = require('webpack')

const dllPath = './dll'

module.exports = {
  mode: 'production',
  entry: {
    vue: ['vue', 'vue-router', 'vuex', 'vue-i18n'],
    grapecity: [
      '@grapecity/spread-excelio',
      '@grapecity/spread-sheets',
      '@grapecity/spread-sheets-barcode',
      '@grapecity/spread-sheets-charts',
      '@grapecity/spread-sheets-designer',
      '@grapecity/spread-sheets-designer-resources-cn',
      '@grapecity/spread-sheets-designer-resources-en',
      '@grapecity/spread-sheets-designer-vue',
      '@grapecity/spread-sheets-languagepackages',
      '@grapecity/spread-sheets-pdf',
      '@grapecity/spread-sheets-pivot-addon',
      '@grapecity/spread-sheets-print',
      '@grapecity/spread-sheets-resources-zh',
      '@grapecity/spread-sheets-shapes',
      '@grapecity/spread-sheets-tablesheet',
      '@grapecity/spread-sheets-vue'
    ]
  },
  output: {
    path: path.join(__dirname, dllPath),
    filename: '[name].dll.js',
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
      name: '[name]_[hash]',
      context: process.cwd()
    })
  ]
}

DllReferencePlugin

new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: path.resolve(__dirname, './dll/vue-manifest.json')
})

CopyWebpackPlugin(不需要）

  new CopyWebpackPlugin({
        patterns: [{
          from: path.resolve(__dirname, './dll/vue.dll.js'),
          to: path.resolve(__dirname, './dist/js/vue.dll.js')
        }, {
          from: path.resolve(__dirname, './dll/grapecity.dll.js'),
          to: path.resolve(__dirname, './dist/js/grapecity.dll.js')
        }]
      })

AddAssetHtmlWebpackPlugin

  new AddAssetHtmlWebpackPlugin({
    filepath: path.resolve(__dirname, './dll/vue.dll.js')
  })，
  new AddAssetHtmlWebpackPlugin({
    filepath: path.resolve(__dirname, './dll//grapecity.dll.js'
  })

利用缓存（webpack5）

 cache: {
  type: 'filesystem',
  allowCollectingMemory: true,
  cacheDirectory: path.resolve(__dirname, './node_modules/.cache_temp')
},