Vite性能优化指南 ✅

最新推荐文章于 2025-06-17 11:37:26 发布

啵咿嗷

最新推荐文章于 2025-06-17 11:37:26 发布

阅读量1k

点赞数 24

CC 4.0 BY-SA版权

分类专栏：项目中的一些问题花里胡哨的技巧文章标签：前端

本文链接：https://blog.csdn.net/yuyuyu972/article/details/147605442

花里胡哨的技巧同时被 2 个专栏收录

5 篇文章

订阅专栏

项目中的一些问题

4 篇文章

订阅专栏

树摇

“树摇”这玩意并非某个构建工具的专利，应该说基于ESM模块化开发的项目都有能力进行树摇。详细的分析可见煮啵的另一篇文章中的最后一小节，最核心的原因是CJS的require本质上是一个运行时的函数。此处只介绍树摇带来的具体效果：

// utils/index.js
export function util1() {
    console.log('util1')
}
export function util2() {
    console.log('util2')
}

// main.js 入口文件
import { util1 } from './utils/index.js
console.log(util1)

这样的代码在打包后会摒弃未被使用的util2，只保留被使用的util1。但如果用CJS模块化进行改写：

// utils/index.js
exports.util1 = () => console.log('util1')
exports.util2 = () => console.log('util2')

// main.js 入口文件
const { util1 } = require('./utils/index.js')

这种写法在打包后，即使util2未被使用，但也会带打包产物中被保留。

分包

在PDD的三面中被狠狠拷打🤯
“分包”即所谓的“代码分割”。常用的实现分包的方法有两种：通过修改Vite配置文件进行分包，或者通过动态导入语法import()进行代码分割。

通过修改Vite配置文件

设想一下：在我们的项目中引入了lodash，在进行分包前，lodash相关的代码会和业务代码一起被打包到同一个chunk中，且chunk的命名是通过哈希的方法来生成的，只要业务代码发生改动，那么chunk的命名几乎就会改变。
问题是，每一次更新我们修改的只是业务代码，lodash这些第三方包的代码我们肯定是不会改动的，但是每一次更新（甚至是每一次刷新）浏览器都得重新请求一次lodash的代码。因为lodash所在的chunk的名称会随版本的更新而变化，对这个chunk的请求浏览器走不了缓存。
所以我们的需求很简单：有没有办法让lodash被打包到一个单独的chunk中，后续浏览器只在第一次加载的时候请求这个chunk即可，后续都读缓存，以提高响应速度？有的兄弟，有的🤓🤓，以下介绍最基本的分包方法（详细的配置可见rollup的文档）：

// vite.config.js
import { defineConfig } from "vite";
export default defineConfig({
	build: {
        minify: false,  // 取消默认的压缩行为，方便观察打包产物
        rollupOptions: {
            output: {
                manualChunks: (id, { getModuleInfo }) => {
                	// getModuleInfo可以查看当前模块的信息
                    if (id.includes('node_modules/lodash')) 
       					return "vendor/lodash"
                }
            }
        }
    },
})

通过import()动态导入

import()动态导入也是实现代码分割的方法，这种优化本质上是借助Promise实现的，详细的分析见煮啵的另一篇博文的最后一章。import动态导入常用于实现路由懒加载（组件按需引入）。以React为例，见以下Demo：

// LazyComponent.tsx
export default function LazyComponent() {
  return <div>LazyComponent</div>;
}

// App.tsx
import { lazy } from "react";
// 动态（按需）引用懒加载组件
const LazyComponent = lazy(() => import("./LazyComponent/index"));
const App = () => {
  return (
    <div>
      <div>App</div>
      <LazyComponent />
    </div>
  );
};
export default App;

之后不管是Chrome控制台还是本地打包产物，都可以看见LazyComponent组件相关的代码被抽离为一个单独的chunk。

多入口打包

// utils.js
export function sayHello() {
    console.log('Hello')
}
export function sayGoodbye() {
    console.log('Goodbye')
}

// scriptA.js
import { sayHello } from "./utils";
function scriptA() {
    console.log("scriptA is running");
    sayHello();
}
scriptA();

// scriptB.js
import { sayHello, sayGoodbye } from "./utils";
function scriptB() {
    console.log("scriptB is running");
    sayHello();
    sayGoodbye();
}
scriptB();

// vite.config.js
export default defineConfig({
    build: {
        minify: false,  // 取消默认的压缩行为，方便观察打包后的产物
        rollupOptions: {
            input: {
                scriptA: path.resolve(__dirname, 'src/indexA.html'),
                scriptB: path.resolve(__dirname, 'src/indexB.html'),
            },
        }
    },
})

此时Vite会以scriptA.js和scriptB.js这两个文件为入口，打包的产物有三个脚本文件，分别为：

// scriptA-HashCode.js
import { s as sayHello } from "./index-BVlMXCZJ.js";
function scriptA() {
  console.log("scriptA is running");
  sayHello();
}
scriptA();

// scriptB-HashCode.js
import { s as sayHello, a as sayGoodbye } from "./index-BVlMXCZJ.js";
function scriptB() {
  console.log("scriptB is running");
  sayHello();
  sayGoodbye();
}
scriptB();

// index-HashCode.js
(function polyfill() {
	// ...额外的与Vite相关的代码。
})()
function sayHello() {
  console.log("Hello");
}
function sayGoodbye() {
  console.log("Goodbye");
}
export {
  sayGoodbye as a,
  sayHello as s
};

此处Vite已进行了默认的优化。默认情况下被引用了至少两次的文件，会被打成一个独立的包。因为sayHello被多次复用，在构建中次函数所属的文件会被单独抽离出来。如果sayHello只在一处被调用，那么打包后它会在调用处的chunk中被声明。

其他优化手段

图片转Base64

关于Base64的分析见煮啵另一篇博文的最后一章。Vite默认将小于4KB的图片转为Base64格式，也可以自己手动调整：

// vite.config.js
export default {
  build: {
    assetsInlineLimit: 4096, // 调整阈值
  },
};

开启资源压缩

Vite默认 ~~（没有手动配过，一直用的是默认）~~ 使用 Terser 压缩 JS，ESBuild 压缩 CSS：

// vite.config.js
export default {
  build: {
    minify: 'terser', // 或 'esbuild'（更快但压缩率略低）
    terserOptions: {  // 自定义 Terser 配置
      compress: { drop_console: true },
    },
  },
};