webpack和vite优化方案都有哪些

好问题 👍。Webpack 和 Vite 的优化方向大体一致，目标都是 提升构建速度、减小打包体积、优化运行性能，但由于两者的架构和原理差异，方案会有一些不同。下面我帮你系统整理一下。

🔹 一、Webpack 优化方案

Webpack 偏重 打包式构建，优化点主要在 构建速度 和 产物体积。

1. 构建速度优化

• 开启多进程/多线程

  • thread-loader：多进程处理 loader

  • parallel-webpack：并行构建

• 缓存

  • cache-loader、babel-loader 的缓存

  • Webpack 5 内置 filesystem cache（推荐）

• 分包

  • 使用 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）

3. 运行性能优化

• 路由懒加载、动态 import

• 使用 PWA：vite-plugin-pwa

• 图片优化：WebP、懒加载

• SSR / SSG：提高首屏性能

🔹 三、对比总结

⚡ 总结一下：

• Webpack 项目优化重点：构建提速（缓存、多进程）、产物精简（tree shaking、压缩、分包）。

• Vite 项目优化重点：生产构建（Rollup 分包、esbuild 压缩）、运行性能（PWA、SSR、懒加载）。