新商家系统性能优化实践

商家系统新版本上线后，团队持续针对构建效率与用户体验做了一轮系统性优化。本文记录核心方案与落地结果，供后续版本复用。

1. 优化目标

本轮优化聚焦以下三个方向：

构建产物体积控制；
静态资源加载效率提升；
发布后更新体验优化（减少长时间等待刷新）。

项目技术栈：Vite + Vue 3 + Element Plus + TypeScript + Sass + Pinia。

2. 构建产物优化

2.1 压缩策略

使用 vite-plugin-compression 生成 gzip 或 brotli 产物，降低网络传输体积：

import compressPlugin from "vite-plugin-compression";

export const createCompress = (compress: any) => {
  if (compress === "brotli") {
    return compressPlugin({
      ext: ".br",
      algorithm: "brotliCompress",
    });
  }

  if (compress === "gzip" || compress) {
    return compressPlugin({
      filter: /\.(js|mjs|json|css|html)$/i,
      ext: ".gz",
      algorithm: "gzip",
      threshold: 10240,
      deleteOriginFile: false,
    });
  }

  return [];
};

2.2 分包与缓存策略

通过 manualChunks 拆分公共依赖与大模块，并结合文件哈希策略提升缓存命中率：

// vite.config.ts
export default defineConfig({
  build: {
    chunkSizeWarningLimit: 10240,
    cssCodeSplit: true,
    reportCompressedSize: true,
    rollupOptions: {
      treeshake: true,
      cache: true,
      output: {
        chunkFileNames: outputHash ? "static/js/[name]-[hash].js" : "static/js/[name].js",
        entryFileNames: outputHash ? "static/js/[name]-[hash].js" : "static/js/[name].js",
        assetFileNames: outputHash
          ? "static/[ext]/[name]-[hash].[ext]"
          : "static/[ext]/[name].[ext]",
        manualChunks: {
          vue: ["vue", "vue-router", "pinia", "axios"],
          player: ["xgplayer", "xgplayer-hls.js"],
          utils: ["@vueuse/core", "@vueuse/head"],
          // ...
        },
        minify: true,
        sourcemap: false,
        ...(minify === "terser"
          ? {
              terserOptions: {
                compress: prod
                  ? {
                      defaults: true,
                      drop_console: true,
                      drop_debugger: true,
                      pure_funcs: ["console.log", "console.warn"],
                    }
                  : false,
                mangle: prod,
                format: {
                  comments: !prod,
                  beautify: prod,
                },
              },
            }
          : {}),
      },
    },
  },
});

3. 静态资源治理

图片资源进行压缩与分级管理；
大图优先上传 CDN，避免全部进入 dist；
小体积资源可按需保留在本地打包产物中；
配合懒加载降低首屏资源压力。

4. 优化结果（阶段性）

本次优化后，主要收益如下：

构建效率提升：Linux 环境构建约 40s，完整部署约 1min；Mac 环境构建约 20s。
首屏加载体验改善：核心页面加载明显加快。
大体积文件拆分：约 3MB 文件拆分至约 700KB 级别，并启用压缩传输。
发布后等待刷新问题得到优化。
构建与语法兼容策略完善，兼容 ES6+ 主流环境。
清理冗余文件与部分臃肿逻辑，降低维护成本。
修复外部链接跨域与访问异常问题。
控制台错误/警告持续清理，稳定性提升。
图片懒加载与渐进式加载落地，进一步优化首屏表现。
完成部分 UI 细节优化，提升整体观感与可用性。

5. 后续建议

引入持续性能监控（如构建时长、包体积、LCP/FCP）；
对 manualChunks 规则做版本化管理，避免分包策略回退；
将“压缩 + 分包 + 缓存”作为新项目默认基线配置。