晨平安

岁岁平，岁岁安，岁岁平安

1021 字

5 分钟

前端工程化实践：Webpack 5 与 Vite 构建工具深度解析

2026-02-27

原创

Webpack

/

Vite

/

前端工程化

/

构建工具

/

性能优化

前端工程化实践：Webpack 5 与 Vite 构建工具深度解析#

⚙️ 前言：前端工程化是现代 Web 开发的基石。无论是 Webpack 还是 Vite，理解它们的原理和优化技巧，对于提升开发效率和构建性能都至关重要。

一、Webpack 5 核心原理#

1.1 构建流程#

Webpack 的构建流程可以分为四个阶段：

初始化阶段：读取配置，创建 Compiler
编译阶段：从入口文件开始，递归构建依赖图
输出阶段：将模块打包成 Bundle
文件生成阶段：写入文件系统

1
Entry -> Loader -> Plugin -> Output
2
  ↓
3
Module Graph (Dependency Graph)
4
  ↓
5
Chunk Graph
6
  ↓
7
Bundle Files

1.2 核心概念#

Entry（入口）：

1
module.exports = {
2
  entry: {
3
    main: './src/index.js',
4
    vendor: './src/vendor.js'
5
  }
6
};

Output（输出）：

1
module.exports = {
2
  output: {
3
    path: path.resolve(__dirname, 'dist'),
4
    filename: '[name].[contenthash:8].js',
5
    clean: true
6
  }
7
};

Loader（加载器）：

1
module.exports = {
2
  module: {
3
    rules: [
4
      {
5
        test: /\.js$/,
6
        exclude: /node_modules/,
7
        use: {
8
          loader: 'babel-loader',
9
          options: {
10
            presets: ['@babel/preset-env']
11
          }
12
        }
13
      },
14
      {
15
        test: /\.css$/,
16
        use: ['style-loader', 'css-loader', 'postcss-loader']
17
      },
18
      {
19
        test: /\.(png|svg|jpg)$/,
20
        type: 'asset/resource'
21
      }
22
    ]
23
  }
24
};

Plugin（插件）：

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

3
module.exports = {
4
  plugins: [
5
    new HtmlWebpackPlugin({
6
      template: './public/index.html'
7
    })
8
  ]
9
};

1.3 Module Federation（模块联邦）#

Webpack 5 引入的 Module Federation 允许在运行时动态加载远程模块：

1
// 主应用配置
2
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
3

4
module.exports = {
5
  plugins: [
6
    new ModuleFederationPlugin({
7
      name: 'host',
8
      remotes: {
9
        app1: 'app1@http://localhost:3001/remoteEntry.js',
10
        app2: 'app2@http://localhost:3002/remoteEntry.js'
11
      },
12
      shared: ['react', 'react-dom']
13
    })
14
  ]
15
};
16

17
// 使用远程模块
18
import('app1/Button').then((Button) => {
19
  // 使用远程组件
20
});

二、Webpack 性能优化#

2.1 构建速度优化#

使用缓存：

1
module.exports = {
2
  cache: {
3
    type: 'filesystem',
4
    buildDependencies: {
5
      config: [__filename]
6
    }
7
  }
8
};

多线程构建：

1
const TerserPlugin = require('terser-webpack-plugin');
2

3
module.exports = {
4
  optimization: {
5
    minimizer: [
6
      new TerserPlugin({
7
        parallel: true
8
      })
9
    ]
10
  }
11
};

缩小 Loader 范围：

1
module.exports = {
2
  module: {
3
    rules: [
4
      {
5
        test: /\.js$/,
6
        include: path.resolve(__dirname, 'src'),
7
        exclude: /node_modules/,
8
        use: 'babel-loader'
9
      }
10
    ]
11
  }
12
};

2.2 产物体积优化#

代码分割：

1
module.exports = {
2
  optimization: {
3
    splitChunks: {
4
      chunks: 'all',
5
      cacheGroups: {
6
        vendor: {
7
          test: /[\\/]node_modules[\\/]/,
8
          name: 'vendors',
9
          chunks: 'all'
10
        },
11
        common: {
12
          minChunks: 2,
13
          chunks: 'all',
14
          enforce: true
15
        }
16
      }
17
    }
18
  }
19
};

Tree Shaking：

1
module.exports = {
2
  mode: 'production',
3
  optimization: {
4
    usedExports: true,  // 标记未使用的导出
5
    sideEffects: false  // 告知 webpack 没有副作用
6
  }
7
};

2.3 开发体验优化#

Source Map：

1
module.exports = {
2
  devtool: 'eval-cheap-module-source-map'
3
};

Dev Server：

1
module.exports = {
2
  devServer: {
3
    hot: true,
4
    open: true,
5
    proxy: {
6
      '/api': 'http://localhost:3000'
7
    }
8
  }
9
};

三、Vite 新一代构建工具#

3.1 Vite 的优势#

Vite 利用浏览器原生 ES Modules 特性，实现了极速的冷启动：

传统构建工具：

1
打包所有文件 -> 启动服务
2
(可能需要几秒钟)

Vite：

1
直接启动服务 -> 按需编译
2
(毫秒级启动)

3.2 基本配置#

1
import { defineConfig } from 'vite';
2
import vue from '@vitejs/plugin-vue';
3

4
export default defineConfig({
5
  plugins: [vue()],
6
  resolve: {
7
    alias: {
8
      '@': '/src'
9
    }
10
  },
11
  server: {
12
    port: 3000,
13
    proxy: {
14
      '/api': {
15
        target: 'http://localhost:8080',
16
        changeOrigin: true
17
      }
18
    }
19
  },
20
  build: {
21
    rollupOptions: {
22
      output: {
23
        manualChunks: {
24
          vendor: ['vue', 'vue-router', 'pinia']
25
        }
26
      }
27
    }
28
  }
29
});

3.3 插件开发#

1
// 自定义 Vite 插件
2
export default function myPlugin() {
3
  return {
4
    name: 'my-plugin',
5

6
    // 配置解析时
7
    config(config, { command }) {
8
      if (command === 'build') {
9
        config.base = '/app/';
10
      }
11
    },
12

13
    // 转换代码
14
    transform(code, id) {
15
      if (id.endsWith('.vue')) {
16
        return {
17
          code: code.replace(/console\.log/g, ''),
18
          map: null
19
        };
20
      }
21
    },
22

23
    // 生成产物时
24
    generateBundle(options, bundle) {
25
      // 修改产物
26
    }
27
  };
28
}

四、对比与选择#

特性	Webpack 5	Vite
冷启动	慢（需要打包）	快（原生 ESM）
热更新	一般	极快（HMR）
生产构建	成熟稳定	基于 Rollup
生态	丰富	快速增长
配置复杂度	较复杂	简洁
适用场景	大型项目	中小型项目

选择建议：

新项目推荐 Vite
现有 Webpack 项目可以逐步迁移
大型项目根据团队熟悉度选择

五、高级技巧#

5.1 动态导入#

1
// Webpack
2
const module = await import(/* webpackChunkName: "lodash" */ 'lodash');
3

4
// Vite
5
const module = await import('./heavy-module.js');

5.2 环境变量#

1
// Webpack
2
const apiUrl = process.env.API_URL;
3

4
// Vite
5
const apiUrl = import.meta.env.VITE_API_URL;

5.3 CSS 处理#

1
// CSS Modules
2
import styles from './Component.module.css';
3

4
// CSS 预处理器
5
// Vite 原生支持
6
import './styles.scss';
7

8
// Webpack 需要配置
9
module.exports = {
10
  module: {
11
    rules: [
12
      {
13
        test: /\.scss$/,
14
        use: ['style-loader', 'css-loader', 'sass-loader']
15
      }
16
    ]
17
  }
18
};