打包工具：WebPack 和 Vite 对比

WebPack、Vite

- [Vite 与 WebPack 的核心差异](#Vite 与 WebPack 的核心差异)
- 性能对比
- 适用场景

Vite 与 WebPack 的核心差异

开发模式

Vite 利用浏览器原生 ES Modules（ESM）支持，在开发环境下直接按需编译，然后通过 ESM 的方式直接提供给浏览器。这种方式完全跳过了传统打包的步骤，无需打包。（例如，在一个包含 100 个组件的 Vue 项目中，Vite 只会在你访问某个具体页面时编译该页面用到的几个组件）

WebPack 在开发时需构建完整的依赖图，然后打包所有模块，生成一个或多个 bundle 文件，这个过程会随着项目规模的增大而显著变慢

构建工具

Vite 基于 Rollup 进行生产环境打包，配置更简洁，通常只需要 10-20 行代码就能满足基本需求。

WebPack 自带打包功能，插件生态庞大但配置复杂。一个完整功能的 WebPack 配置通常需要 100 行以上的代码，涉及 loader、plugin、optimization 等多个配置块。

启动速度

Vite 冷启动极快，因为仅需启动一个简单的开发服务器，不需要进行任何打包工作。

WebPack 需遍历依赖并生成打包产物，项目越大启动越慢。

热更新（HMR）

Vite 的 HMR 基于 ESM，仅更新修改的模块。

WebPack 需重新构建变动的模块链，速度随项目规模下降。例如修改一个深层嵌套的组件时，WebPack可能需要重建整个依赖链

性能对比

开发体验

Vite 的按需编译避免冗余工作，适合大型项目。

WebPack 的完整打包在开发阶段可能成为瓶颈。

生产构建

Vite 的 Rollup 配置优化更聚焦于现代浏览器。针对现代浏览器进行了深度优化。它默认支持代码分割、动态导入等现代特性。

WebPack 可通过拆分代码、懒加载等优化复杂场景。

生态支持

WebPack 插件生态系统成熟。几乎所有前端工具都有对应的 WebPack loader 或 plugin，例如：Babel 转译、Sass/Less 预处理、ESLint 集成、图片压缩等

Vite 的插件系统基于 Rollup，某些特定场景可能需要开发自定义插件

适用场景

Vite 优势场景

面向现代浏览器的项目（不需要支持 IE11 等旧浏览器）
对开发体验要求高的项目，特别是大型项目。例如：一个包含数百个路由的管理后台系统
需要快速原型开发的项目。例如：黑客马拉松或教学演示项目
库/框架的开发。例如：开发一个 Vue/React 组件库

WebPack 优势场景

需要支持旧版浏览器的项目。例如：企业级应用需要兼容 IE11
依赖特定 WebPack 插件的工作流。例如：使用特定 CSS 模块方案的项目
需要高度定制化构建流程的项目。例如：微前端架构中的复杂构建配置
已有大型 WebPack 代码库的迁移成本过高时

代码格式示例（非实际配置）：

javascript 复制代码

// Vite 配置示例
// Vite 配置示例 - 典型的最小化配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()], // 使用 Vue 插件
  build: {
    target: 'esnext', // 面向现代浏览器
    minify: 'terser', // 使用 terser 进行代码压缩
    sourcemap: true   // 生成 sourcemap
  }
})

// WebPack 配置示例 - 基本配置框架
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']  // 使用 Babel 转译
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 处理 CSS
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
}