vite性能优化

最新推荐文章于 2025-04-29 15:49:51 发布

雅望天堂i

最新推荐文章于 2025-04-29 15:49:51 发布

阅读量2.1k

点赞数 39

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/crystalshun/article/details/145651298

版权

Vite 是一个基于现代浏览器 ES 模块支持的构建工具，以其极快的开发服务器启动速度和高效的热更新著称。然而，随着项目规模的增长，仍然可能遇到性能瓶颈。以下是一些 Vite 性能优化的策略，帮助你进一步提升开发和生产环境的性能。

1. 使用最新版本的 Vite

Vite 团队会不断优化性能和修复问题，确保你使用的是最新稳定版本。
更新命令：
```
npm update vite
```

2. 优化依赖预构建

Vite 会在首次启动时对依赖进行预构建（Pre-Bundling），以提升后续加载速度。

缓存依赖预构建结果：
- Vite 默认会将预构建结果缓存到 node_modules/.vite 目录中，避免重复构建。
- 确保缓存目录不被意外删除。
手动指定需要预构建的依赖：
在 vite.config.js 中通过 optimizeDeps 配置项手动指定需要预构建的依赖。
```
export default {
  optimizeDeps: {
    include: ['react', 'react-dom', 'lodash'],
  },
};
```
排除不需要预构建的依赖：
如果某些依赖已经是 ESM 格式，可以通过 exclude 排除它们。
```
export default {
  optimizeDeps: {
    exclude: ['some-esm-package'],
  },
};
```

3. 使用按需加载（Code Splitting）

使用动态导入（Dynamic Import）来按需加载模块，减少初始加载时间。
```
const module = await import('./path/to/module');
```
Vite 默认支持动态导入，无需额外配置。

4. 优化静态资源

压缩图片：
使用 vite-plugin-imagemin 插件压缩图片。

npm install vite-plugin-imagemin -D

配置：

import viteImagemin from 'vite-plugin-imagemin';

export default {
  plugins: [
    viteImagemin({
      gifsicle: { optimizationLevel: 3 },
      optipng: { optimizationLevel: 5 },
      mozjpeg: { quality: 75 },
      pngquant: { quality: [0.65, 0.9], speed: 4 },
      svgo: {
        plugins: [{ removeViewBox: false }],
      },
    }),
  ],
};

使用 CDN 加载静态资源：
将静态资源（如图片、字体）托管到 CDN，减少服务器压力。

5. 使用 Tree Shaking

Vite 默认支持 Tree Shaking，确保你的代码使用 ES 模块语法（import/export）。
在 package.json 中设置 "sideEffects": false，明确标记无副作用的模块。

6. 减少插件使用

尽量减少不必要的插件，每个插件都会增加构建时间。
如果必须使用插件，选择性能更好的替代品。

7. 使用 `vite-plugin-compression` 压缩构建产物

使用 vite-plugin-compression 插件对构建产物进行 Gzip 或 Brotli 压缩。

npm install vite-plugin-compression -D

配置：

import viteCompression from 'vite-plugin-compression';

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

8. 使用 `vite-plugin-pwa` 实现 PWA

使用 vite-plugin-pwa 插件实现 PWA，利用 Service Worker 缓存资源，提升加载速度。

npm install vite-plugin-pwa -D

配置：

import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [
    VitePWA({
      registerType: 'autoUpdate',
      manifest: {
        name: 'My App',
        short_name: 'App',
        theme_color: '#ffffff',
      },
    }),
  ],
};

9. 使用 `vite-plugin-html` 优化 HTML

使用 vite-plugin-html 插件优化 HTML 文件，例如注入环境变量或压缩 HTML。

npm install vite-plugin-html -D

配置：

import { createHtmlPlugin } from 'vite-plugin-html';

export default {
  plugins: [
    createHtmlPlugin({
      minify: true, // 压缩 HTML
      inject: {
        data: {
          title: 'My App',
        },
      },
    }),
  ],
};

10. 使用 `vite-plugin-analyzer` 分析构建结果

使用 vite-plugin-analyzer 分析构建结果，找出体积较大的模块并进行优化。

npm install vite-plugin-analyzer -D

配置：

import { visualizer } from 'vite-plugin-analyzer';

export default {
  plugins: [
    visualizer({
      open: true, // 自动打开分析报告
    }),
  ],
};

11. 优化开发服务器配置

禁用不必要的功能：
在开发环境中，禁用不需要的功能（如 HTTPS）以提升性能。
```
export default {
  server: {
    https: false, // 禁用 HTTPS
  },
};
```

调整 HMR 设置：
如果热更新（HMR）性能较差，可以调整 HMR 设置。

export default {
  server: {
    hmr: {
      overlay: false, // 禁用错误覆盖层
    },
  },
};

12. 使用 `vite-plugin-chunk-split` 优化代码分割

使用 vite-plugin-chunk-split 插件手动控制代码分割策略。

npm install vite-plugin-chunk-split -D

配置：

import { chunkSplitPlugin } from 'vite-plugin-chunk-split';

export default {
  plugins: [
    chunkSplitPlugin({
      strategy: 'default',
    }),
  ],
};

13. 使用 `vite-plugin-inspect` 调试插件

使用 vite-plugin-inspect 调试插件，查看插件的中间状态。

npm install vite-plugin-inspect -D

配置：

import inspect from 'vite-plugin-inspect';

export default {
  plugins: [
    inspect(),
  ],
};

14. 生产环境优化

启用 build.minify：
在生产环境中启用代码压缩。

export default {
  build: {
    minify: 'terser', // 或 'esbuild'
  },
};

启用 build.sourcemap：
仅在需要时启用 Source Map，避免影响构建性能。
```
export default {
  build: {
    sourcemap: true,
  },
};
```

15. 使用 `vite-plugin-externals` 排除外部依赖

使用 vite-plugin-externals 排除外部依赖（如通过 CDN 引入的库），减少打包体积。

npm install vite-plugin-externals -D

配置：

import { viteExternalsPlugin } from 'vite-plugin-externals';

export default {
  plugins: [
    viteExternalsPlugin({
      react: 'React',
      'react-dom': 'ReactDOM',
    }),
  ],
};