前端打包优化举例

‌前端打包优化实施步骤与示例（Vue 项目实战） ‌

‌一、代码分割与动态加载‌

‌路由级懒加载

javascript 复制代码

// src/router/index.js
const OrderList = () => import(/* webpackChunkName: "order" */ '@/views/OrderList.vue');
const UserCenter = () => import(/* webpackChunkName: "user" */ '@/views/UserCenter.vue');

‌效果 ‌：访问 /order 时加载 order.[hash].js（仅含订单模块代码），首屏主包体积减少 40%‌。

‌2. ‌异步组件动态导入

javascript 复制代码

// 复杂弹窗按需加载
const PaymentDialog = defineAsyncComponent(() => 
  import('@/components/PaymentDialog.vue')
);

‌场景‌：仅在用户点击支付按钮时加载弹窗组件‌。

‌二、第三方库分离与优化‌

‌显式分包（Webpack 配置）

php 复制代码

// vue.config.js
chainWebpack: config => {
  config.optimization.splitChunks({
    cacheGroups: {
      echarts: {
        test: /[\\/]node_modules[\\/]echarts/,
        name: 'echarts',
        priority: 20
      },
      lodash: {
        test: /[\\/]node_modules[\\/]lodash/,
        name: 'lodash',
        priority: 15
      }
    }
  });
}

‌优势 ‌：生成独立文件如 echarts.1234abcd.js，业务代码更新时第三方库缓存不失效‌

‌CDN 引入高频库

xml 复制代码

<!-- public/index.html -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.0/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@1.0.0/dist/axios.min.js"></script>

css 复制代码

// vue.config.js
configureWebpack: {
  externals: {
    vue: 'Vue',
    axios: 'axios'
  }
}

‌效果‌：主包体积减少 30%（如 Vue 核心库 200KB 转为 CDN 加载）‌。

‌三、公共模块提取与资源优化‌

‌公共工具库合并

yaml 复制代码

// vue.config.js
cacheGroups: {
  utils: {
    test: /[\\/]src[\\/]utils/,
    name: 'utils',
    minChunks: 2
  }
}

‌场景‌：提取 API 请求模块、日期处理函数等复用代码‌。

‌图片与字体压缩

arduino 复制代码

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module.rule('images')
      .test(/\.(png|jpe?g|gif)$/i)
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: false });
  }
};

‌效果‌：图片体积平均压缩 50%（如 2MB → 1MB）‌。

‌四、构建分析与深度优化‌

‌体积可视化诊断

css 复制代码

npm install webpack-bundle-analyzer --save-dev

arduino 复制代码

// vue.config.js
plugins: [new BundleAnalyzerPlugin()]

‌使用‌：定位冗余模块（如未使用的国际化语言包）并移除‌

‌Tree Shaking 配置

javascript 复制代码

// 仅导入必要函数（如 lodash）
import { debounce } from 'lodash-es';

‌配合 ‌：在 package.json 中设置 "sideEffects": false 启用摇树优化‌。

‌五、环境配置与部署优化‌

‌多环境变量隔离

ini 复制代码

# .env.production
VUE_APP_API_BASE = https://api.prod.com
NODE_ENV = production

‌作用‌：区分开发/生产环境接口地址，避免硬编码‌。

‌Gzip/Brotli 压缩

bash 复制代码

# nginx.conf
gzip on;
gzip_types text/plain application/javascript image/png;
brotli on;

‌典型优化前后对比（电商项目） ‌

指标	优化前	优化后
‌主包体积‌	2.8MB	1.1MB
‌首屏加载时间‌	3.5s	1.2s
‌缓存命中率‌	30%	80%
‌订单页加载时间‌	2.1s	0.9s（动态加载）