关于vue2老项目的打包优化，实现首屏加载速度提升

分析项目代码体积

yarn add webpack-bundle-analyzer

在webpack.dev.conf.js中配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
plugins: [
    new BundleAnalyzerPlugin(),  //代码体积分析插件
    ......
]

执行yarn run dev或 npm run dev会开一个8888的端口展示分析结果

将路由引入改为懒加载格式（或异步加载）

如何使用：https://www.cnblogs.com/huihuihero/p/17303108.html

css文件分开打包配置

在webpack.prod.conf.js文件下：搜索allChunks并将其设置为false

注1：当路由引入为懒加载格式时（或异步加载），此项配置会比较有效果。

注2：当为allChunks为false的时候，只会提取初始化的时候引入的css,当allChunks属性为true时，会把异步引入的css也提取出来。
详细解释：https://www.qycn.com/xzx/article/14331.html

chunks分割,vue.config.js

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all', // 可选值：all，async 和 initial。
        minSize: 100 * 1024, // 引入的模块大于 xxkb才做代码分割，官方默认20000字节
        maxSize: 200 * 1024, // 若引入的模块大于 xxkb，则告诉webpack尝试再进行拆分
        minChunks: 1, //拆分前必须共享模块的最小块数。
        maxAsyncRequests: 8, //按需加载时并行请求的最大数目。
        maxInitialRequests: 5, //入口点的最大并行请求数
        automaticNameDelimiter: '~', //默认情况下，webpack将使用块的来源和名称（例如vendors~main.js）生成名称。此选项允许您指定要用于生成的名称的分隔符。
        automaticNameMaxLength: 40, //允许为SplitChunksPlugin生成的块名称的最大长度
        // name: "",
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块
            priority: -10, // 优先级值越大优先级越高，默认-10，不用修改
            name(module) {
              // 设定分包以后的文件模块名字，按照包名字替换拼接一下
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
              return `npm.${packageName.replace('@', '')}`;
            },
          },
        },
      },
    },
  }
};

拓展

1、将main.js引入的组件库、插件等改成cdn加速的方式

如何使用cdn加速？
https://blog.csdn.net/qq_34191778/article/details/126202249

2、将项目打包后的静态文件（除index.html以外的文件），放在三方云服务器上，而非自用服务器上

此方法对于那种自身服务器带宽小；以及用户体量大，同时间流量较大的情况效果不错。
其他情况下，对速度提升并不明显。
三方服务器下载速度好像是单条2M/s的上限，如果自身服务器带宽达到这个标准且用户体量不是特别大（同时有几十万几百万访问那种），这可以不做此优化