vite如何减少打包体积

Vite 有以下几种方式可以帮助减少打包体积：

1. ESM 静态分析：Vite 使用 ES6 的模块导入方式，能够静态分析依赖关系，只加载必要的模块，从而减少了不必要的代码。

2. 按需加载：Vite 内置了代码拆分功能，可以将组件、路由等按需加载，避免一次性加载所有代码。

3. 优化插件：Vite 内置了多种优化插件，如 CSS 压缩、JS 压缩、图片压缩等，可以进一步优化打包体积。

4. Rollup 打包：Vite 内置了 Rollup 打包工具，它可以进行代码摇树优化、Tree Shaking、Code Splitting 等操作，从而进一步减少打包体积。

总之，Vite 提供了多种优化手段，可以帮助我们减少打包体积，提高应用性能。

相关问题

vite设置打包内存溢出

### Vite 构建过程中内存溢出解决方案

当执行 `vite build` 命令时遇到内存不足错误，这通常是因为构建过程消耗了大量的RAM资源。为了有效处理这个问题，可以从多个角度入手优化。

#### 调整 Node.js 的最大堆栈大小
默认情况下，Node.js 对可用的最大堆栈空间有限制。可以通过设置环境变量来增加这个限制：

node --max-old-space-size=8192 ./node_modules/vite/bin/build.js

上述命令将最大旧生代堆大小调整到 8GB[^1]。

#### 使用 TerserPlugin 进行代码压缩优化
如果项目中的 JavaScript 文件非常大，在生产环境中启用更高效的压缩工具如 Terser 可能会有所帮助。修改 vite.config.ts 或 js 配置文件如下所示:

import { defineConfig } from 'vite';
import terser from '@rollup/plugin-terser';

export default defineConfig({
    plugins: [
        // ...其他插件配置...
        terser(),
    ],
});

通过这种方式可以在不影响性能的前提下减少最终包体积从而降低内存占用[^2]。

#### 合理拆分模块并按需加载
对于大型应用来说，合理规划依赖关系以及采用懒加载技术能够显著减轻单次编译的压力。确保只引入必要的库和组件，并利用动态导入语法实现异步加载功能模块。

#### 利用缓存机制加快增量构建速度
开启 rollupCache 参数可以让 Vite 缓存中间产物以便下次更快完成相同部分的打包工作，进而间接缓解因重复计算带来的高负载情况。

build: {
    rollupOptions: {
      cache: true,
    },
},

以上措施有助于解决大部分场景下的内存溢出问题；然而具体实施效果还需视实际情况而定。建议逐步尝试不同的方法组合找到最适合当前项目的方案。

vite 打包 svg

### Vite 项目中打包处理 SVG 文件

在现代前端开发环境中，Vite 提供了一种高效的方式来管理和优化资源文件，包括像 SVG 这样的矢量图形。为了确保最佳实践并实现有效的配置，在 Vite 中处理 SVG 文件有几种推荐的方法。

#### 使用 `vite-plugin-svgr`

对于 React 或其他 JSX 支持的框架来说，`vite-plugin-svgr` 是一个非常流行的插件，它允许开发者通过导入的方式将 SVG 转换成 React 组件[^1]：

// vite.config.js
import { defineConfig } from 'vite';
import svgrPlugin from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    svgrPlugin()
  ]
});

这样做的好处是可以直接在组件内部使用 `<SvgIcon />` 形式的标签来引入图标，并且可以利用 props 来动态改变颜色、大小等属性。

#### 静态资源引用方式

如果不需要把 SVG 当作 React 组件，则可以通过简单的 URL 引用来加载它们。只需将所有的静态资产放置于项目的 `/public` 文件夹下即可自动被识别为公共资源路径:

<img src="/assets/logo.svg" alt="Logo">

这种方式适合那些只需要简单展示而无需额外交互逻辑的情况。

#### 动态导入与懒加载

当应用中有大量不同类型的图标时，考虑按需加载会更加节省带宽和提高性能。借助 Webpack 的魔法注释特性（尽管这里是针对 Rollup/Vite），可以在运行时根据条件异步获取特定图像：

const importIcon = async (name) => {
  const module = await import(`./icons/${name}.svg`);
  return new URL(module.default, import.meta.url).href;
};

这种方法不仅减少了初始页面体积，还能够提升用户体验。