JavaScriptVite使用技巧_JavaScript现代构建工具

幻影之瞳 2025-12-01 00:00:00 次阅读

Vite通过浏览器原生ES模块实现秒级启动与热更新，支持React/Vue等框架，配置路径别名、环境变量及生产优化后，显著提升开发效率与构建性能。

想让JavaScript项目构建更快、更简洁？Vite就是为此而生。它利用浏览器原生ES模块支持，做到开发启动秒开，热更新几乎无延迟。比起传统打包工具，Vite在现代前端开发中优势明显，尤其适合React、Vue、Svelte等框架。

启用快速开发服务器

Vite默认自带一个高速开发服务器，启动后支持热模块替换（HMR），修改代码后页面局部刷新，体验极佳。

只需在项目根目录运行：

npm run dev

确保package.json中有对应脚本：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

开发服务器默认监听localhost:5173，打开即看效果，无需等待打包。

合理配置vite.config.js

通过vite.config.js可以自定义路径别名、插件、构建选项等。

常见配置示例：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  server: {
    port: 3000,
    open: true
  }
})

这样就能用@/components/Header代替冗长的相对路径，提升代码可读性。

优化生产构建输出

Vite使用Rollup进行生产构建，输出文件默认放在dist目录。可通过配置减少体积、提升加载速度。

建议开启压缩和资源拆分：

build: {
  minify: 'terser',
  chunkSizeWarningLimit: 500,
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['react', 'react-dom']
      }
    }
  }
}

这样做能让第三方库单独打包，用户缓存更高效。