Vite 中如何进行构建优化？

推荐答案

在 Vite 中进行构建优化可以通过以下几种方式：

1. 代码分割：利用 Vite 的自动代码分割功能，将代码拆分为多个小块，按需加载，减少初始加载时间。
2. Tree Shaking：通过配置 rollupOptions，启用 Tree Shaking 功能，移除未使用的代码，减少最终打包体积。
3. 压缩资源：使用 vite-plugin-compression 插件对静态资源进行压缩，减少文件大小，提升加载速度。
4. 预构建依赖：通过 optimizeDeps 配置项，预构建依赖项，减少开发环境的冷启动时间。
5. 使用 CDN：将静态资源托管到 CDN 上，利用 CDN 的全球加速功能，提升资源加载速度。
6. 缓存策略：通过配置 HTTP 缓存头，利用浏览器缓存，减少重复请求。

本题详细解读

1. 代码分割

Vite 默认支持代码分割，它会根据路由和动态导入自动将代码拆分为多个小块。开发者可以通过动态导入语法（如 import()）手动控制代码分割的粒度。

// 动态导入示例
const module = () => import('./module.js');

2. Tree Shaking

Vite 使用 Rollup 作为打包工具，默认启用了 Tree Shaking。开发者可以通过 vite.config.js 中的 rollupOptions 进一步优化 Tree Shaking 的效果。

export default {
  build: {
    rollupOptions: {
      treeshake: true,
    },
  },
};

3. 压缩资源

使用 vite-plugin-compression 插件可以对静态资源进行 Gzip 或 Brotli 压缩，减少文件体积。

// www.javascriptcn.com code example
import viteCompression from 'vite-plugin-compression';

export default {
  plugins: [
    viteCompression({
      algorithm: 'gzip',
    }),
  ],
};

4. 预构建依赖

Vite 在开发模式下会预构建依赖项，以减少冷启动时间。开发者可以通过 optimizeDeps 配置项自定义预构建的依赖。

export default {
  optimizeDeps: {
    include: ['lodash', 'axios'],
  },
};

5. 使用 CDN

将静态资源托管到 CDN 上，可以显著提升资源的加载速度。开发者可以通过配置 base 选项来指定 CDN 地址。

export default {
  base: 'https://cdn.example.com/',
};

6. 缓存策略

通过配置 HTTP 缓存头，可以让浏览器缓存静态资源，减少重复请求。开发者可以通过 vite-plugin-html 插件来设置缓存策略。

// www.javascriptcn.com code example
import { createHtmlPlugin } from 'vite-plugin-html';

export default {
  plugins: [
    createHtmlPlugin({
      minify: true,
      cacheControl: {
        assets: 'public, max-age=31536000',
      },
    }),
  ],
};