• 压缩
• 首屏加载文件
• 分包

压缩

const CompressionWebpackPlugin = require("compression-webpack-plugin");

config.plugin('compressionPlugin').use(CompressionWebpackPlugin).tap(() => [
    {
        test: /.js$|.html$|.css/, //匹配文件名
        threshold: 10240, //超过10k进行压缩
        deleteOriginalAssets: false //是否删除源文件
    }
])

分包

config.optimization.splitChunks({
      chunks: 'all',
      cacheGroups: {
        libs: {
          name: 'chunk-libs',
          test: /[\/]node_modules[\/]/,
          priority: 10,
          chunks: 'initial', // 仅限于最初依赖的第三方
          reuseExistingChunk: true
        },
        elementPlus: {
          name: 'chunk-elementPlus', // split elementPlus into a single package
          priority: 20, // 优先级应大于 libs 中，否则将会打包到 libs中
          test: /[\/]node_modules[\/]_?element-plus(.*)/
        },
        // 公共组件库
        commons: {
          name: 'chunk-commons', // 指定 chunks 名称
          test: resolve('src/components'), // 符合组的要求就给构建 vendors
          priority: 30, // 数字越大优先级越高，默认为0，自定义一般是负数，决定 cacheGroups 中相同条件下每个组执行的优先顺序
          reuseExistingChunk: false, // 当前 chunk 如果包含了从 main 里面分离出来的模块，则重用这个模块，这样的问题是会影响 chunk 的名称
          maxInitialRequests: 1, // 最大初始化加载次数，毅哥入口文件可以并行加载的最大文件数量，默认3
          minSize: 0 // 表示在分离前的最小模块大小，默认为0，最小为30000
        },
        echarts: {
          name: 'chunk-echarts',
          test: /[\/]node_modules[\/]_?echarts(.*)/,
          priority: 40,
        }
      }
    });

提取公共chunk 映射关系的文件

• 将包含 chunks 映射关系的文件单独从app.js中提取出来。因为每个 chunk 的 id 都是基于内容 hash出来的，每次改动都会影响它，如果不提取出来，相当于每次app.js都会改变，缓存就失效了。
• 设置 runtimeChunk之后，webpack就会生成一个个 runtime-xxx.js文件，每次更改运行时代码文件时，打包构建时 app.js 的hash值不会改变。如果每次项目更新都会更改app.js 的 hash 值，那么用户端浏览器每次都需要虫灾加载变化的 app.js，如果项目大且优化分包没有做好的话，会导致第一次加载很耗时，导致用户天一案变差。设置 runtimeChunk 为了解决这个问题。
• 总之，此设置是避免因文件的频繁变更导致浏览器缓存失效。

config.optimization.runtimeChunk("single");

去掉预加载文件

config.plugins.delete('prefetch')
config.plugins.delete('preload')