好问题 👍。Webpack 和 Vite 的优化方向大体一致,目标都是 提升构建速度、减小打包体积、优化运行性能,但由于两者的架构和原理差异,方案会有一些不同。下面我帮你系统整理一下。
🔹 一、Webpack 优化方案
Webpack 偏重 打包式构建 ,优化点主要在 构建速度 和 产物体积。
1. 构建速度优化
-
开启多进程/多线程
-
thread-loader:多进程处理 loader -
parallel-webpack:并行构建
-
-
缓存
-
cache-loader、babel-loader的缓存 -
Webpack 5 内置
filesystemcache(推荐)
-
-
分包
-
使用
splitChunks拆分依赖,避免重复打包 -
DllPlugin或ModuleFederationPlugin(Webpack 5)进行依赖分离
-
-
缩小构建范围
-
使用
include/exclude限制 loader 作用范围 -
合理设置
resolve.modules、resolve.alias、extensions
-
-
持久化构建
HardSourceWebpackPlugin(Webpack 5 已内置 cache 可替代)
2. 打包体积优化
-
Tree Shaking
-
使用
ESM(import/export),移除无用代码 -
配置
sideEffects: false
-
-
代码压缩
-
JS:
TerserWebpackPlugin -
CSS:
CssMinimizerPlugin -
图片:
image-webpack-loader
-
-
动态导入
import()懒加载
-
CDN 加载
externals配合 CDN 引入第三方库(如 React、Vue)
-
Scope Hoisting
ModuleConcatenationPlugin,减少函数包裹
3. 运行性能优化
-
开启 懒加载路由 、按需加载组件
-
图片优化:WebP、雪碧图、资源压缩
-
CSS 提取:
MiniCssExtractPlugin
🔹 二、Vite 优化方案
Vite 基于 ESM + Rollup ,开发时几乎不需要打包,优化点主要在 生产构建 和 运行性能。
1. 开发速度优化
-
按需依赖预构建
- 使用
optimizeDeps.include/exclude控制依赖预构建
- 使用
-
缓存
- Vite 内置 HTTP 缓存 + ESBuild 预构建缓存
-
CDN 加速
- 配置
vite-plugin-cdn-import
- 配置
2. 打包体积优化
-
Tree Shaking(Rollup 默认支持)
-
代码分割
build.rollupOptions.output.manualChunks自定义 chunk 拆分
-
压缩
- 内置
terser/esbuild压缩(推荐用 esbuild,速度快)
- 内置
-
资源优化
-
vite-plugin-imagemin压缩图片 -
vite-plugin-compression开启 gzip/brotli 压缩
-
-
CDN 外链
externals+ CDN 方式引入第三方库
-
按需加载
- UI 库使用
vite-plugin-style-import(如 Antd、Element Plus)
- UI 库使用
3. 运行性能优化
-
路由懒加载、动态 import
-
使用 PWA:
vite-plugin-pwa -
图片优化:WebP、懒加载
-
SSR / SSG:提高首屏性能
🔹 三、对比总结
| 优化点 | Webpack | Vite |
|---|---|---|
| 开发速度 | 缓存、多进程、缩小范围 | 原生快,依赖预构建、缓存 |
| 打包速度 | 缓存、并行压缩、分包 | esbuild 压缩、Rollup 分包 |
| 体积优化 | Tree Shaking、Scope Hoisting、CDN | Tree Shaking、manualChunks、CDN |
| 运行性能 | 懒加载、压缩、图片优化 | 懒加载、压缩、PWA、SSR |
| 插件生态 | 成熟,方案丰富 | 插件新但增长快,Rollup 插件可复用 |
⚡ 总结一下:
-
Webpack 项目优化重点:构建提速(缓存、多进程)、产物精简(tree shaking、压缩、分包)。
-
Vite 项目优化重点:生产构建(Rollup 分包、esbuild 压缩)、运行性能(PWA、SSR、懒加载)。
