公司前端项目打包体积从 2MB 降到 400KB，我改了这四个配置

公司项目用 Webpack 打包，随着业务增长，打包体积从 500KB 慢慢涨到了 2MB。首屏加载时间从 1 秒变成 4 秒，移动端用户投诉说"页面白屏太久"。

花了两个下午优化，现在打包体积 400KB，首屏 1.2 秒。分享四个真正有用的配置，不用改业务代码。

第一个：按需加载，不是全量引入

我们项目用了 Lodash，之前是 import _ from 'lodash'，整个库被打包进去，70KB。

改成按需引入：

JavaScript

javascript 复制代码

import debounce from 'lodash/debounce';

或者直接用 lodash-es，Tree Shaking 自动去掉没用到的函数。优化后 Lodash 部分从 70KB 降到 8KB。

Element Plus 也一样，之前全量引入，现在改成自动按需导入：

JavaScript

javascript 复制代码

// vite.config.js
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
};

第二个：图片和字体别打包进 JS

项目里有很多图标字体（iconfont），之前是 base64 编码打进 JS 里，一个字体文件 200KB，JS 体积直接涨 200KB。

改成外链引入，或者用小图标替代。我们最后把大部分图标字体换成了 SVG Sprite，需要哪个加载哪个。

图片用 Vite 的 assetsInlineLimit 控制，小于 4KB 的才内联，大于 4KB 的走 CDN：

JavaScript

yaml 复制代码

export default {
  build: {
    assetsInlineLimit: 4096,
  },
};

第三个：代码分割，路由级别懒加载

Vue Router 默认把所有组件打包成一个 JS 文件。改成路由懒加载：

JavaScript

ini 复制代码

const Home = () => import('./views/Home.vue');
const About = () => import('./views/About.vue');

打包后每个路由一个 chunk，首屏只加载当前页面需要的代码。配合 Webpack/Vite 的 splitChunks，公共依赖抽成单独的 chunk，避免重复加载。

第四个：Gzip 和 Brotli 压缩，服务器端配置

前端打包后，Nginx 配置开启 Gzip：

nginx

bash 复制代码

gzip on;
gzip_types text/plain application/javascript text/css;
gzip_min_length 1024;

我们的 JS 文件 400KB，Gzip 后 120KB，Brotli 后 100KB。移动端 4G 环境下，加载时间从 4 秒降到 1.2 秒。

一个没采用的方案：Webpack 迁 Vite

我们评估过迁 Vite，但项目用了太多 Webpack 插件，迁移成本太高。最后选择在 Webpack 上做优化，投入产出比更高。

如果从头新建项目，我会直接选 Vite。老项目要评估迁移成本，别为了追新而追新。

现在的构建结果

打包体积：2MB → 400KB（Gzip 后 120KB）
首屏加载：4 秒 → 1.2 秒
构建时间：45 秒 → 30 秒（代码分割后构建略快）

最后问大家：

你们项目打包体积多大？有没有从 Webpack 迁到 Vite 的经验？或者用过什么更狠的优化手段？评论区聊聊，我帮你们看看。