vue3+vite+TypeScript打包优化

在Vue 3 + Vite + TypeScript项目中，可以通过以下方法进行打包优化：

1. 使用生产环境变量：

   在vite.config.ts中设置define选项，使用import.meta.env.MODE来判断是否为生产环境，以启用生产环境的优化。

2. 代码分割：

   使用Vite的代码分割特性，它会自动地将你的代码分割成多个chunk，并在需要时按需加载。

3. 树摇插件：

   使用vite-plugin-purge-icons等插件来移除未使用的图标，减少包体积。

4. 配置Terser压缩：

   在vite.config.ts中配置build.terserOptions来进一步压缩生成的包。

5. 使用CDN外链：

   通过配置Vite插件来将依赖项外链到CDN，减少包体积。

以下是一个简化的vite.config.ts配置示例：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    target: 'esnext',
    outDir: 'dist',
    terserOptions: {
      compress: {
        // 生产环境开启压缩
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ['console.log'] // 自定义需要移除的函数
      },
      mangle: true,
      output: {
        comments: false,
      },
    },
  },
  server: {
    open: true,
  },
});

在实际操作中，你可能需要根据项目具体情况进行更详细的优化配置，比如配置Terser的compress和mangle选项来进一步优化包体积和压缩比例。