优化首屏加载速度——webpack打包优化（压缩和分包）

由于webpack默认生成一个chunk.js文件，导致该文件可能导致该文件体积过大，首次加载的时候耗时太长，对用户不友好。

解决：

• 压缩
• 分包

压缩

使用compressionPlugin插件压缩：

• vue.config.js:

const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = defineConfig({
//   webpack配置： 对内部的 webpack 配置进行更细粒度的修改
  chainWebpack: (config) => {
    // config.plugins.delete("prefetch"); //默认开启prefetch(预先加载模块)，提前获取用户未来可能会访问的内容 在首屏会把这十几个路由文件，都一口气下载了 所以我们要关闭这个功能模块
    // 对超过1Mb的文件gzip压缩
    config.plugin("compressionPlugin").use(
      new CompressionWebpackPlugin({
        test: /\.(js|css|html|png|gif)$/, // 匹配文件名
        threshold: 1024000
      })
    );
  }
})

• 还需要再所部署的服务上对gz文件进行适配，以node为例
  app.js

var express = require('express');
var compression = require('compression')
var app = express();
app.use(compression()); // 支持.gz文件

分包

分包: 将node_modules文件夹下的所有组件，根据大小进行分包, 超过300k进行分包，小于100k的不进行分包。
（设置多个入口文件也有助于分包）

• vue.config.js:

const CompressionWebpackPlugin = require("compression-webpack-plugin");
module.exports = defineConfig({
configureWebpack: {
    // 分包: 将node_modules文件夹下的所有组件，根据大小进行分包, 超过300k进行分包，小于100k的不进行分包。
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              const packageMatch = module.context.replace(/\\/, "\\").match(
                /[\\/]node_modules[\\/](.*?)([\\/]|$)/
              );
              const packageName = (packageMatch && packageMatch[1]) || `test${(Math.random() * 100).toFixed(0)}}`

              return `npm.${packageName.replace("@", "")}`;
            },
            chunks: "all",
            enforce: true,
            priority: 10,
            minSize: 100000, // 100KB
            maxSize: 300000,
            reuseExistingChunk: true
          }
        }
      }
    }
  },
})