第 15 卷

• 优化静态资源处理：

• 小资源转 Base64（如小于 8KB 的图片），减少文件数量和 I/O 操作；
• 大型静态资源（如视频、大图片）使用 CDN 引入，排除在打包范围外。

（3）合理配置：区分开发/生产环境

• 开发环境：禁用生产优化：开发环境核心目标是“快速构建”，无需启用代码压缩、CSS 提取等耗

时操作：

// 开发环境配置 module.exports = {

mode: 'development', devServer: { hot: true }, // 启用 HMR，减少刷新开销

module: { rules: [

{ test: /\.css$/,

use: ['style-loader', 'css-loader'] // 开发环境用 styleloader 注入，避免提取 CSS

} ]

}, optimization: {

minimize: false, // 禁用代码压缩 splitChunks: false // 开发环境无需代码分割

} };

• 生产环境：精准优化：生产环境核心目标是“产物优化”，但需避免冗余配置：

• 仅在生产环境启用 MiniCssExtractPlugin、 TerserPlugin 等优化插件；
• 使用 externals 排除第三方依赖，通过 CDN 引入，减少打包体积和时间。

（4）优化插件：减少冗余操作

• 移除无用插件：检查插件列表，移除开发环境中不需要的生产插件（如 TerserPlugin、

MiniCssExtractPlugin）。

• 使用高效插件替代：

• 用 esbuild-loader 替代 babel-loader，用 ESBuildMinimizerPlugin 替代

• 拆分大型项目（Monorepo）：对于大型项目，使用 Webpack 工作区（Workspaces）或

lerna 实现 Monorepo 架构，按功能拆分模块，实现独立打包，避免全量构建。

• 减少动态依赖：尽量避免 require(`./${filename}`) 等动态依赖，改用静态导入，减少

Webpack 上下文模块的解析成本。

• 按需加载第三方依赖：对于体积大的第三方库（如 lodash），使用按需导入（如 import {

debounce } from 'lodash-es'），避免全量导入增加打包时间。

十九、Vite和webpack对比有哪些区别和优势?

Vite（法语“快速”之意）是尤雨溪团队推出的前端构建工具，定位为“下一代前端构建工具”，核心优势是“快速启动”和“极速热更新”。与 Webpack 相比，Vite 在底层架构、构建理念、性能表现等

方面存在显著差异，更适合现代前端项目的开发体验优化；而 Webpack 则凭借成熟的生态和全面的功能，仍是复杂项目构建的主流选择。

1. 核心区别对比

依赖；生产环境基于 Rollup 打包，聚焦产物优化。

响。

底层打包器内置自定义打包器，支持丰富开发环境无打包器；生产环境的模块类型和自定义配置。使用 Rollup（比 Webpack 打

包更高效，产物体积更小）。

模块解析支持 ESM、CommonJS 等多原生支持 ESM；对

Monorepo 优化）。

仅需配置特殊需求。

验的场景，对浏览器兼容性要求不高的项目。

兼容性支持 IE 等旧浏览器（需配置开发环境依赖浏览器原生 Loader 转译）。ESM 支持（不支持 IE）；生

产环境可通过配置兼容旧浏览器，但配置成本略高。

1. Vite 的核心优势

• 开发体验极致：秒级启动开发服务器，毫秒级热更新，彻底解决大型项目开发时“启动慢、更新

慢”的痛点。

• 零配置开箱即用：默认支持 React、Vue、TypeScript、CSS 预处理器（Sass/Less）、静态资源等

主流场景，无需手动配置 Loader/Plugin。

• 生产环境产物优化：基于 Rollup 打包，默认开启 Tree Shaking、代码分割、资源压缩等优化，产

物体积通常比 Webpack 更小。

• 原生 ESM 支持：顺应前端模块化发展趋势，直接使用浏览器原生 ESM 能力，减少打包层的性能损

耗。

• 内置功能丰富：内置开发服务器、热更新、CSS 模块、PostCSS、静态资源处理等功能，无需额外

安装依赖。

1. Webpack 的核心优势

• 生态成熟稳定：经过多年迭代，拥有最全面的 Loader 和 Plugin 生态，可解决各类复杂构建需求

（如 PWA、Electron 打包、多语言支持）。