FE-07-前端工程化：Webpack、Vite、Rollup 与 esbuild

字数统计: 1.6k字   |   阅读时长≈ 8分

FE-07-前端工程化：Webpack、Vite、Rollup 与 esbuild

本节目标：理解前端构建工具的原理，掌握主流工具（Vite、Webpack）的使用和选型，能调试构建问题。

1. 为什么要构建

原始 JS/TS 不能直接在浏览器跑：

  • ES2024+ 语法需要转译（Babel/SWC）
  • TypeScript 需要编译
  • JSX/Vue SFC 需要转换
  • CSS 预处理器（Less/Sass/PostCSS）需要编译
  • 代码压缩、Tree-shaking、代码分割
  • 资源处理（图片压缩、字体子集化）
  • 注入环境变量、定义全局常量

构建工具的核心职责：把源码变成可部署的产物。

2. 构建工具演进

1
2
3
4
5
6
7
8
9
10
11
2009  r.js (RequireJS)
2012  Grunt（任务流）
2013  Gulp（流式）
2012  Browserify（Node 模块 → 浏览器）
2015  Webpack 1.0（统治十年）
2016  Rollup（库打包，更好的 tree-shake）
2018  Parcel（零配置）
2020  Vite（基于 esbuild + Rollup）
2020  esbuild（Go 写的超快打包）
2022  SWC（Rust 写的转译器）
2023  Turbopack（Vercel 出的，Rust）

3. Webpack

最成熟、插件生态最丰富。

3.1 核心概念

1
2
3
4
5
Entry：入口文件
Output：输出配置
Loader：转换非 JS 模块（CSS、图片）
Plugin：执行更广泛的任务（HtmlWebpackPlugin、DefinePlugin）
Mode：development / production

3.2 基本配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/main.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[contenthash:8].chunk.js',
    publicPath: '/',
    clean: true,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: { '@': path.resolve(__dirname, 'src') },
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',  // 或 babel-loader
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.(png|jpg|svg)$/,
        type: 'asset/resource',
        generator: { filename: 'images/[hash][ext]' },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({ template: './public/index.html' }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
        },
      },
    },
  },
};

3.3 常用 Loader 和 Plugin

Loader：

  • babel-loader / swc-loader / esbuild-loader：转译 JS/TS
  • ts-loader：TypeScript
  • style-loader / css-loader / sass-loader：CSS
  • file-loader / asset modules：图片/字体
  • vue-loader：Vue SFC

Plugin：

  • HtmlWebpackPlugin：生成 HTML
  • MiniCssExtractPlugin：CSS 单独提取
  • DefinePlugin：注入全局变量
  • CompressionPlugin：gzip/brotli 压缩
  • BundleAnalyzerPlugin：可视化 bundle 大小
  • CopyWebpackPlugin：复制静态资源

4. Vite（推荐）

Vite = 开发用 esbuild（快），生产用 Rollup（稳）。

4.1 为什么 Vite 快

  • ESM 原生：开发时不打包，浏览器直接加载 ESM
  • esbuild 预构建依赖：比 JS 写的打包器快 10-100 倍
  • HMR 按需：只更新改动的模块，不重载整页

4.2 创建项目

1
2
3
4
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev    # 启动 dev server

4.3 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': path.resolve(__dirname, './src') },
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, ''),
      },
    },
  },
  build: {
    outDir: 'dist',
    target: 'es2020',
    minify: 'esbuild',
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          router: ['react-router-dom'],
        },
      },
    },
  },
});

4.4 环境变量

1
2
3
4
5
6
7
8
// .env
VITE_API_URL=https://api.example.com
VITE_DEBUG=true

// src/main.ts
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE);    // 'development' | 'production'
console.log(import.meta.env.DEV);     // boolean

5. Rollup（库打包首选）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// rollup.config.js
import typescript from '@rollup/plugin-typescript';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.ts',
  output: [
    { file: 'dist/index.cjs.js', format: 'cjs', exports: 'named', sourcemap: true },
    { file: 'dist/index.esm.js', format: 'esm', sourcemap: true },
  ],
  plugins: [resolve(), commonjs(), typescript()],
  external: ['react', 'react-dom'],  // 不打包 peerDependencies
};

特点：

  • Tree-shaking 极强（基于 ES Module 静态分析）
  • 输出代码可读
  • 适合库打包（不打包依赖，减小体积）

6. esbuild（超快转译）

1
2
3
4
5
6
7
8
9
10
11
// esbuild.config.js
require('esbuild').build({
  entryPoints: ['src/main.ts'],
  bundle: true,
  minify: true,
  sourcemap: true,
  target: ['es2020', 'chrome90', 'firefox90', 'safari14'],
  outfile: 'dist/bundle.js',
  loader: { '.png': 'file', '.svg': 'text' },
  define: { 'process.env.NODE_ENV': '"production"' },
}).catch(() => process.exit(1));

特点：

  • Go 写的，10-100x faster than JS-based bundlers
  • 支持 bundling、minify、TS、JSX
  • 通常作为 Vite 内部使用
  • API 简单，适合脚本/CI 场景

7. SWC（Rust 转译器）

1
2
3
4
5
6
7
8
9
// .swcrc
{
  "jsc": {
    "parser": { "syntax": "typescript", "tsx": true },
    "target": "es2020",
    "transform": { "react": { "runtime": "automatic" } }
  },
  "module": { "type": "es6" }
}

Next.js 13+ 默认用 SWC。

8. 选型建议

场景 推荐工具 理由
大型业务项目 Vite 快、生态好、配置简单
老项目迁移 Webpack 文档多、解决方案成熟
库/SDK Rollup tree-shake 好，输出可读
脚本/CI esbuild API 简单，毫秒级
大型 React/Next.js Next.js (内置) 不用选
微前端 Module Federation 跨构建工具共享

9. 关键优化技巧

9.1 代码分割

1
2
3
4
5
6
7
8
9
10
// 路由懒加载
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

<Suspense fallback={<Loading />}>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
  </Routes>
</Suspense>

9.2 Tree-shaking

确保导入是 ESM 风格：

1
2
3
4
5
6
// ✓ 静态导入，可被 tree-shake
import { debounce } from 'lodash-es';

// ✗ 动态属性访问，不能被 tree-shake
import _ from 'lodash';
_.debounce(...);

9.3 Bundle 分析

1
2
3
4
5
# Vite
npx vite-bundle-visualizer

# Webpack
npx webpack-bundle-analyzer dist/stats.json

9.4 缓存

1
2
3
4
// vite.config.ts
build: {
  cache: true,  // 默认开启
}

10. 调试技巧

Source Map：

  • devtool: 'eval-cheap-module-source-map'（开发）
  • devtool: 'source-map'（生产，要上传 .map 到 Sentry）

分析模块大小：

1
2
3
4
5
# Vite
vite build --mode analyze  # 需要装 rollup-plugin-visualizer

# 找大依赖
npx vite-bundle-visualizer

常见问题：

  • 循环依赖：A import B，B import A → 解包不完整。检查 import 路径
  • CSS 顺序：CSS 模块的 import 顺序决定样式优先级
  • 环境变量 undefined：VITE_ 前缀忘了（Vite）/ REACT_APP_（CRA）
  • Tree-shake 失效：用了副作用 import（import 'lib/dist/style.css'）

小结

工具 速度 配置 生态 场景
Webpack 慢 复杂 极丰富 老项目
Vite 极快 简单 较丰富 新项目首选
Rollup 中 简单 库 库打包
esbuild 最快 API 一般 脚本/CI
SWC 很快 配置文件 Next 内置 Next.js
Turbopack 很快 Next 内置 新 Next.js 14+

2026 年建议：

  • 新项目：Vite（React/Vue/Svelte）
  • 库：Rollup 或 tsup（基于 esbuild）
  • 大型企业应用：Vite + 适当自定义
  • SSR/全栈：Next.js、Nuxt、SvelteKit
  • 不用 Webpack 写新项目了

下一节讲包管理与 monorepo：pnpm、yarn、workspaces。

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
Java后端开发、Linux开发、
公众号开发、开源爱好者、Linux

联系QQ:562054870