vue3+vite+TypeScript打包优化

最新推荐文章于 2025-06-11 12:10:28 发布

qq_33440740

最新推荐文章于 2025-06-11 12:10:28 发布

阅读量907

点赞数

CC 4.0 BY-SA版权

文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/qq_33440740/article/details/129687386

文章介绍了在Vite中提升性能的几种方法，包括使用动态导入按需加载代码，利用TreeShaking删除未使用代码，配置缓存加速构建，以及在生产模式下构建和使用gzip压缩来减小文件体积。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 使用动态导入

在 Vite 中，使用动态导入（Dynamic Import）可以帮助我们将代码按需加载，减少初始加载时间，提高性能。例如：

// 不使用动态导入
import { Module } from "module";

// 使用动态导入
const modulePromise = import("module").then((module) => module.default as Module);

2. 使用 Tree Shaking

在 Vite 中，可以通过使用 Tree Shaking 来删除项目中未使用的代码，减小打包后的文件体积。要使用 Tree Shaking ，需要将 tsconfig.json 文件中的 compilerOptions 中的 removeComments、noEmitHelpers、downlevelIteration、importHelpers 和 strict 等设置为 true。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "removeComments": true,
    "noEmitHelpers": true,
    "downlevelIteration": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}

3. 使用缓存

在 Vite 中，可以通过使用缓存来提高构建速度。我们可以在项目根目录下的 vite.config.ts 文件中配置缓存选项，例如：

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    cacheDir: ".vite/cache",
  },
});

4. 使用生产模式构建

在 Vite 中，使用 vite build 命令可以进行生产模式的构建。生产模式构建会对代码进行压缩和优化，减小打包后的文件体积，提高性能。

5. 使用 gzip 压缩

在 Vite 中，可以通过使用 gzip 压缩来减小文件体积，提高性能。我们可以在 vite.config.ts 文件中配置 compress 选项来启用 gzip 压缩，例如：

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    brotliSize: false,
    chunkSizeWarningLimit: 2000,
    rollupOptions: {
      output: {
        manualChunks(id: string) {
          if (id.includes("node_modules")) {
            return id.toString().split("node_modules/")[1].split("/")[0].toString();
          }
        },
      },
    },
    terserOptions: {
      compress:{
    	drop_console: true,
    	drop_debugger: true,
  	  },
	},
	compress: "gzip",
  },
});