webpack打包代码分割，进行性能优化

今天对一个老项目进行性能优化，首先是安装可视化打包工具进行分析

发现被全部打包到一个文件里面，导致文件过大，加载白屏时间过长

对他进行代码分割之后的

文件体积不变，单个文件的就变小了

编写一个数组进行遍历生成要分割的代码包

const codeSpiltList = [
  'echarts',
  'element',
  'html2canvas',
  'mavon-editor',
  'jspdf',
  'xlsx'
]

let splitChunksOptions = {}
codeSpiltList.forEach(item => {
  const res = {
    name: `chunk-${item}`, // 生成的文件名
    test: new RegExp(`[\\\\/]node_modules[\\\\/]${item}[\\\\/]`), // 匹配echarts的路径
    priority: 20, // 优先级，数字越大优先级越高
    enforce: true
  }
  console.log('🚀 ~ file: CodeSplittingPlugin.js:18 ~ res:', res)
  splitChunksOptions[item] = res
})
splitChunksOptions['default'] = {
  minChunks: 2,
  priority: -20,
  reuseExistingChunk: true
}
console.log(
  '🚀 ~ file: CodeSplittingPlugin.js:16 ~ splitChunksOptions:',
  splitChunksOptions
)
module.exports = {
  splitChunksOptions
}

在vue.config.js里面使用

 // 配置代码分割
    config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: splitChunksOptions
    })