Vue 项目打包优化：使用 webpack-bundle-analyzer 分析包体积并拆分第三方依赖

1. 安装依赖
npm install --save-dev webpack-bundle-analyzer
# 或
yarn add -D webpack-bundle-analyzer

2. 配置 vue.config.js

在项目根目录创建/修改 vue.config.js：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin({
        analyzerMode: 'server',    // 启动HTTP服务器展示报告
        analyzerHost: '127.0.0.1', // 主机地址
        analyzerPort: 8888,        // 端口号
        openAnalyzer: true,        // 完成后自动打开浏览器
        reportFilename: 'report.html', // 报告文件名
        defaultSizes: 'parsed',    // 显示解析后的大小
      })
    ],
    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 20000,           // 最小拆分包大小（20KB）
        maxSize: 250000,          // 最大拆分包大小（250KB）
        cacheGroups: {
          // 拆分第三方依赖
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            priority: -10,
          },
          // 拆分常用工具库
          utils: {
            test: /[\\/]src[\\/]utils[\\/]/,
            name: 'utils',
            minChunks: 1,
            priority: -20
          }
        }
      }
    }
  }
}

3. 运行分析报告
npm run build --report
# 或
vue-cli-service build --report

构建完成后会自动打开 http://127.0.0.1:8888 显示可视化分析图：


(图中不同颜色区块代表不同模块的体积占比)

4. 优化策略（基于分析结果）
(1) 按需加载第三方库
// 错误示例：全量引入 lodash
import _ from 'lodash';

// 正确示例：按需引入
import debounce from 'lodash/debounce';

(2) CDN 引入大型库

在 vue.config.js 添加：

module.exports = {
  chainWebpack: config => {
    config.externals({
      vue: 'Vue',
      'vue-router': 'VueRouter',
      axios: 'axios'
    });
  }
}

在 public/index.html 中引入CDN：

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
</head>

(3) 异步加载路由组件
// router.js
const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './views/About.vue');

5. 验证优化效果

重新构建后对比：

指标 优化前 优化后
总包大小 3.2MB 1.4MB
首屏加载时间 2.8s 1.1s
第三方依赖占比 68% 32%

关键公式：
首屏加载时间优化率：
$$ \text{优化率} = \frac{T_{\text{before}} - T_{\text{after}}}{T_{\text{before}}} \times 100% $$

6. 注意事项
  1. 优先处理分析图中 大于 100KB 的模块
  2. 使用 webpackChunkName 规范异步组件命名
  3. 定期更新 CDN 链接的版本号
  4. 生产环境关闭分析器：
plugins: process.env.NODE_ENV === 'production' 
  ? [] 
  : [new BundleAnalyzerPlugin()]

通过以上步骤，可显著降低打包体积，提升应用加载性能。建议每次依赖更新后重新分析包结构。

# vue.js # webpack # 前端
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

SeedVR2终极指南：如何用单步扩散模型实现专业级视频修复

还在为老旧视频的模糊画质而烦恼吗？面对抖动严重的监控录像或褪色的家庭影像，你是否曾希望有一种简单高效的修复方案？SeedVR2正是为解决这些痛点而生的一站式视频修复工具。作为字节跳动推出的先进视频修复模型，它能够在单步推理中实现专业级的视频质量提升，彻底改变了传统视频修复的工作流程。## 核心价值：为什么选择SeedVR2进行视频修复？**传统视频修复的三大瓶颈**：1. **计算成本高

avatar AI Agent技术社区

深度解析Amlogic S9xxx电视盒子Armbian系统：从闲置设备到Linux服务器的终极实战指南

你是否拥有一台闲置的Amlogic S9xxx系列电视盒子？想让它摆脱单一的视频播放功能，变身为功能强大的Linux服务器、开发平台或家庭媒体中心？本指南将为你详细解析如何通过Armbian系统实现这一转变，让你的电视盒子重获新生，成为高性能的Linux设备。Armbian系统基于Debian/Ubuntu构建，专为ARM芯片优化，提供了完整的Linux生态支持。## 🎯 核心价值与独特优势

avatar AI Agent技术社区

CANN/runtime Event管理API

本章节描述 CANN Runtime 的 Event 管理接口，用于事件的创建、记录、同步、计时及 IPC 跨进程共享。- [`aclError aclrtCreateEvent(aclrtEvent *event)`](#aclrtCreateEvent)：创建Event，创建出来的Event可用于统计两个Event之间的耗时、多Stream之间的任务同步等场景。- [`aclError

avatar AI Agent技术社区