一文聊聊前端构建工具该怎么选？

哈喽，大家好，我是Fine。

构建工具相信大家不陌生了，无论是Webpack，Vite，还是Rollup，做技术选型时，如何选择哪一个呢。今天这篇文章带你简单了解一下。

以下是正文：

前端 Bundler，即前端打包工具，用于处理和优化前端资源（JavaScript、CSS、HTML、图片、字体等）的工具。它将这些资源组合并捆绑成一个或多个文件，以减少加载时间和提高应用性能

为什么需要 bundler

随着现代前端开发的复杂度不断增加，Bundler 作为构建过程的重要组成部分，帮助开发者管理复杂的依赖关系、进行代码拆分、实现模块化开发，并优化构建输出，已经成为开发流程中不可或缺的一部分

模块化开发：支持现代 JavaScript 模块系统，提高代码可维护性。
减少 HTTP 请求：将多个文件合并打包，减少请求数量，提高加载速度。
代码转译与兼容性：将现代 JavaScript 转译成兼容的旧版本。
优化与压缩：自动优化和压缩代码，减小文件体积。
静态资源处理：处理和优化 CSS、图片、字体等静态资源。
提升开发体验：提供热模块替换等功能，提高开发效率。
代码分割与懒加载：按需加载代码，提高执行性能。
自动化与任务管理：简化和自动化构建任务，提升开发过程效率。

Webpack

Webpack 是目前最流行的前端打包工具，功能强大，插件生态丰富，适合处理复杂的前端项目。

功能全面、生态丰富、高度可定制，几乎可以满足所有需求
配置繁琐复杂，学习成本高
性能相对于 Go、Rust 编写的 bundler 较慢

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.js', // 输出文件名
    clean: true // 清理输出目录
  },
  module: {
    rules: [
      {
        test: /.js$/, // 匹配.js文件（使用正则表达式）
        exclude: /node_modules/, // 排除node_modules目录
        use: {
          loader: 'babel-loader', // 使用babel-loader
        }
      },
      {
        test: /.css$/, // 匹配.css文件
        use: ['style-loader', 'css-loader'] // 依次使用style-loader和css-loader
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // 指定模板文件
      filename: 'index.html', // 输出文件名
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'public'), // 指定静态文件目录
    compress: true, // 启用gzip压缩
    port: 9000, // 端口号
    open: true, // 自动打开浏览器
    hot: true // 启用热模块替换
  },
  resolve: {
    extensions: ['.js', '.jsx'] // 自动解析文件扩展名
  },
  mode: 'development' // 设置模式为开发模式
};

如果应用规模不大，或者暂时对构建性能的要求并不高，Webpack 是最保险的选择

Vite

严格来讲 Vite 并不能仅仅是 bundler，Vite 既是一个前端开发服务器和任务运行器，也是一个 bundler，只不过在不同阶段，它的功能侧重点有所不同

开发阶段：主要对模块进行即时编译和 HMR，而不进行传统的打包，因此这个阶段可以认为它不是传统的 bundler。
生产构建阶段：使用 Rollup 进行完整的打包和优化工作，因此在这个阶段，它确实可以被认为是一个 bundler。

这种双重策略使得 Vite 能够在提供极快开发体验的同时，也能生成高效的生产代码，从而更好地适应现代前端开发的需求。

mport { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: 'src/main.js',
      output: {
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      },
    }
  }
});

如果使用 Vue 那可以直接应用 Vite，使用 React 等如果没有历史包袱，Vite 也是一个不错的选择，如果是老项目建议沿用 Webpack 或替换为 Rspack 等和 Webpack 生态兼容的选择

ESBuild

ESBuild 是一个新的打包工具，因其极高的编译速度而迅速受到关注和青睐，使用 Go 语言编写。

高速构建：编译速度非常快，是 Webpack 的数倍。适合开发环境和快速构建。
简单易用：配置简洁，适合快速上手。
生态系统较小：插件和加载器数量不如 Webpack 丰富，某些复杂需求可能无法实现。
功能覆盖不完全：目前不支持所有 Webpack 的高级特性，如复杂的代码分割策略。

ESBuild 取代 Webpack 独立使用的话生态和代码风格=功能的缺失可能会使大问题，但可以作为 Webpack 的一个插件使用，以获得 Webpack 的生态系统和配置灵活性的同时，利用 ESBuild 的高效编译能力来加速构建过程

module.exports = {
  entry: './src/index.tsx',  // 入口文件
  output: {
    filename: 'bundle.js',  // 打包后的文件名
    path: path.resolve(__dirname, 'dist')  // 输出路径
  },
  module: {
    rules: [
      {
        test: /.tsx?$/,  // 匹配 TypeScript 和 TSX 文件
        loader: 'esbuild-loader',
        options: {
          loader: 'tsx',  // 适配 TypeScript 和 React 的 JSX
          target: 'es2015'  // 指定编译目标为 ES2015
        }
      },
      {
        test: /.css$/,  // 匹配 CSS 文件
        use: ['style-loader', 'css-loader']  // 使用 style-loader 和 css-loader 加载 CSS
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']  // 解析文件扩展名
  },
  devtool: 'source-map'  // 启用 source map 以便调试
};

Rspack

我们创建 Rspack 的原因，是为了解决在字节跳动维护构建工具时遇到的各种性能问题。由于字节跳动内部存在许多巨石应用，它们都具有复杂的构建配置，生产环境的构建需要耗费十几分钟，甚至超过半小时；开发环境的耗时也超过十几分钟。

我们在 webpack 上尝试了多种方法来优化这些巨石应用，但是效果甚微。我们意识到在 webpack 上的优化已经难以为继，必须要从底层改造，才能适应我们的需求。

Rspack 是字节跳动技术团队为了解决构建性能使用 Rust 开发的 bundler

使用 Rust 编写，并且将大量的 loader 内置，带来了显著的性能提升和配置简化
配置基于 webpack 设计实现，开发者可以非常轻松地将项目从 webpack 迁移至 rspack
虽然 Rspack 内置了一些常见的加载器，但其生态系统的插件和加载器数量不如 Webpack 丰富
作为一个新兴的构建工具，社区支持和文档资源相对较少
与现有工具链和流行框架的集成度不如 Webpack

Rspack 相对 Turbopack 还是很有潜力，但目前在成长期，尤其是作为国人发布的产品，海外的参与度在前期可能有限，考虑到社区支持和文档资源，建议观望

[Respack 2024.08.28 发布了 v1.0]，新项目可以尝试一下了

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      {
        test: /.(ts|tsx|js)$/,
        loader: 'rspack-loader',
        options: {
          loader: 'tsx',
          target: 'es2015'
        }
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  devtool: 'source-map'
};

Turbopack

Turbopack 是 Webpack 的作者使用 Rust 语言开发一个前端模块化的工具，目标是取代 Webpack，目前 Turbopack 仍然处于 AIpha 阶段，离正式运用到生产环境还有不少时间。

快确实是快，但主要提升来自于 SWC
Turbopack 提供了一些基础插件和扩展，能够支持常见的文件处理和优化任务，但仍然与 Webpack 和其他成熟工具的插件生态系统有差距
作为新兴工具，Turbopack 的社区相对来说还在发展初期，社区规模和活跃度与 Webpack 等工具相比还不大

const path = require('path');

module.exports = {
  entry: './src/index.tsx', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: 'bundle.js', // 输出文件名
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'], // 自动解析扩展名
    alias: {
      '@': path.resolve(__dirname, 'src'), // 别名配置
    },
  },
  module: {
    rules: [
      {
        test: /.tsx?$/, // 匹配 .ts 或 .tsx 文件
        use: 'ts-loader', // 使用 ts-loader 处理
        exclude: /node_modules/, // 排除 node_modules 目录
      },
      {
        test: /.css$/, // 匹配 .css 文件
        use: ['style-loader', 'css-loader'], // 依次使用 style-loader 和 css-loader
      }
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'public'), // 指定内容目录
    compress: true, // 启用 gzip 压缩
    port: 3000, // 端口号
    hot: true, // 启用 HMR（热模块替换）
    open: true, // 自动打开浏览器
  },
  mode: 'development', // 设置开发模式
};

Turbopack 被设计为 Next.js 的一个未来核心构建工具，以替代 Webpack 和其他构建工具。这种紧密集成在 Next.js 项目中有一定的优势，其它项目不建议使用

Rollup

Rollup 从一开始就设计为打包 JavaScript 库，因此在构建库文件时有很多优化措施。例如，输出更干净的代码结构、更少的开销（boilerplate）等，顺便说一句 Rollup 是第一个广泛应用和推广 Tree Shaking 的 JavaScript 模块打包工具

Rollup 原生支持多种模块格式（如 ES6、CommonJS、UMD、AMD 等），这使得它在发布兼容性库时非常方便。图表四兄弟 D3.js、Three.js、Chart.js、Highcharts 都使用 rollup 进行打包，Echarts、LodashES、Preact、Svelte、dayjs、date-fns 等也在使用 rollup，当然 vite 目前底层还在使用 Rollup 在生产阶段构建（使用 Rust 写的 [rolldown]已经开源了，未来可能替换掉 Rollup）

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',  // 入口文件
  output: {
    file: 'dist/bundle.js',  // 输出文件
    format: 'iife',  // 立即调用函数表达式(IIFE)格式适合浏览器环境
    sourcemap: true  // 生成sourcemap文件以便调试
  },
  plugins: [
    resolve(),  // 处理模块路径
    commonjs(),  // 转换CommonJS模块为ES6
    babel({
      exclude: 'node_modules/**',  // 排除node_modules目录
      babelHelpers: 'bundled'
    }),
    postcss({
      extract: true  // 将CSS提取到单独的文件
    }),
    terser()  // 压缩输出文件
  ]
};

Rollup 其实没有太多和 Webpack 对比的必要，插件的生态的丰富度和配置灵活性肯定不及 Webpack，但 Rollup 更适合于开发和打包 JavaScript 库，尤其是希望生成干净、体积小的可重用模块时

SWC

虽然我们对 SWC 的理解主要是作为代码转译工具使用，但 SWC/swcpack 也有 bundler 的能力

SWC can be used for both compilation and bundling. For compilation, it takes JavaScript / TypeScript files using modern JavaScript features and outputs valid code that is supported by all major browsers.

但不幸的是 SWC 作者主要精力在 Turbopack 上

This feature is still under construction. Also, the main author of SWC works for [Turbopack(opens in a new tab)] by Vercel, so this feature is not something that will be actively developed.

建议目前不要使用，反而希望 SWC 在代码转译生态上发发力

原文地址：https://juejin.cn/post/7390815289993216054
侵删