web 打包 优化

优化首屏的性能其实非常重要，因为首屏的性能直接影响到用户的体验，如果首屏的性能不好，用户可能会因为加载时间过长而离开网站，从而影响网站的转化率。

1、使用 gzip 优化构建产物

yarn add -D vite-plugin-compression

vite.config.ts

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";
import viteCompression from "vite-plugin-compression"; 

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  return {
    plugins: [react(), tailwindcss(), viteCompression()], 
    // ... existing code
  };
});

同时需要在 nginx 中配置

gzip on;

2、使用 vite 分包优化构建产物

vite.config.ts

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vite";

// https://vite.dev/config/
export default defineConfig(({ mode }) => {
  return {
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            react: ["react", "react-dom"],
            antd: ["antd"],
            lucide: ["lucide-react"],
            zustand: ["zustand"],
            "react-router": ["react-router"],
            "react-hook-form": ["react-hook-form"],
            axios: ["axios"],
            "class-variance-authority": ["class-variance-authority"],
            clsx: ["clsx"],
            "tailwind-merge": ["tailwind-merge"],
            tailwindcss: ["tailwindcss"],
          },
        },
      },
    },
  };
});

3、使用动态导入来自动分包

在应用中合理的使用动态导入，可以让 vite 自动将代码拆分成多个包，从而减少首屏的加载时间。

如使用 lazy Suspense 等组件来实现代码的按需加载。可以在例如需要在页面加载前进行一些异步操作，如获取数据、计算等，组件还不能加载的时候可以将其放在 lazy 中，然后在 Suspense 中进行加载。

app.ts

import { lazy, Suspense } from "react";

const LazyComponent = lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;