Vite配置：让你的代码飞速编译！

Vite配置：让你的代码飞速编译！

在前端开发的世界里，速度就是生命。而Vite，这个由尤雨溪大佬打造的新型构建工具，就像是一颗火箭，让我们的代码编译速度达到了前所未有的高度。但是，你知道吗？通过一些简单的配置，你可以让这颗火箭飞得更快！

模块热更新（HMR）配置

Vite的模块热更新（HMR）功能让开发效率大幅提升。但是，有时候你可能会发现HMR并不像预期的那样快。这时候，你可以在vite.config.ts中进行一些优化配置：

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    hmr: {
      overlay: false, // 关闭错误覆盖，避免遮挡页面
      timeout: 30000, // 增加超时时间，避免网络延迟影响
    },
  },
});

预编译依赖

Vite的预编译功能可以提前处理第三方库，让你的开发环境启动得更快。你可以在vite.config.ts中配置optimizeDeps：

import { defineConfig } from 'vite';

export default defineConfig({
  optimizeDeps: {
    include: ['lodash', 'axios'], // 需要预编译的依赖
    exclude: ['vue'], // 不需要预编译的依赖
  },
});

代码分割策略

通过Rollup插件配置，你可以实现更合理的代码分割，减少打包时间：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        },
      },
    },
  },
});

有时候，你可能希望Vite只处理TypeScript文件，忽略其他类型的文件。比如你的项目正在从JavaScript迁移到TypeScript，或者你希望优化构建速度。这时候，你需要对Vite进行一些特别的配置。

配置vite.config.ts

在Vite的配置文件中，你可以通过resolve.extensions来限制文件扩展名：

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    extensions: ['.ts', '.tsx'], // 只处理TS和TSX文件
  },
  build: {
    rollupOptions: {
      input: 'src/main.ts', // 确保入口文件是TS文件
      external: [/\.js$/], // 排除JS文件
    },
  },
});

移除不必要的插件

如果你不需要处理Vue或JSX文件，可以移除相关的插件：

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [], // 清空插件列表或仅保留必要插件
});

配置tsconfig.json

确保你的TypeScript配置只包含TS文件：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true
  },
  "include": ["src/**/*.ts"], // 只包含TS文件
  "exclude": ["node_modules", "**/*.js"] // 排除JS文件
}

通过以上配置，你就可以让Vite只编译TypeScript文件，忽略其他类型的文件了。

Vite的配置优化可以让你的开发效率大幅提升。无论是通过HMR优化、预编译依赖，还是代码分割策略，都可以让代码编译速度更快。而通过限制文件类型，你可以让构建过程更加专注，进一步提升效率。

有了这些配置，你的代码编译速度一定会快得让你怀疑是不是开了外挂！所以，不妨试试这些配置，让你的开发效率飞速提升吧！