WebStorm 不提供打包体积分析，需通过构建工具配置实现：Vue CLI 项目用 webpack-bundle-analyzer，Vite 项目用 rollup-plugin-visualizer，或 Vue CLI 专属 --report 参数快速生成报告。
WebStorm 本身不提供打包体积分析能力，真正起作用的是 Vue 项目底层的构建工具（如 Vite 或 Vue CLI 的 webpack），WebStorm 只是运行和调试的 IDE。想在 WebStorm 环境里看到打包体积可视化报告，关键不是改 WebStorm 设置，而是正确配置构建工具并触发分析命令。
webpack-bundle-analyzer 在 Vue CLI 项目中的启用方式
这是最常用、最直观的体积分析方案，适用于基于 webpack 的 Vue2/Vue3 项目（如 vue-cli 创建的项目）。它会在 npm run build 后自动打开一个本地网页，展示每个 chunk 的体积构成。
- 安装插件：
npm install webpack-bundle-analyzer --save-dev - 在
vue.config.js中添加插件（注意仅在生产环境启用）：const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { return { plugins: [new BundleAnalyzerPlugin()] } } } } - 执行打包：
npm run build，终端会输出类似Analyzer opened in browser at http://127.0.0.1:8888的提示 - ⚠️ 常见错误：
Cannot find module 'webpack-bundle-analyzer'—— 检查是否漏装或装在了dependencies而非devDependencies
Vite 项目用 rollup-plugin-visualizer 替代 webpack-bundle-analyzer
Vite 默认不走 webpack，所以 webpack-bundle-analyzer 无效。必须换用 Rollup 生态的 rollup-plugin-visualizer，它生成的 stats.html 文件可直接用浏览器打开。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 安装：
npm install rollup-plugin-visualizer --save-dev - 在
vite.config.js中配置：import { visualizer } from 'rollup-plugin-visualizer'; export default defineConfig({ plugins: [ visualizer({ open: true, // 自动打开浏览器 filename: 'dist/stats.html' // 输出路径 }) ] }) - 执行
npm run build后，dist/stats.html即为可视化报告 - ⚠️ 注意：Vite 的
build.rollupOptions.output.manualChunks配置会影响 chunk 划分，但不会影响 visualizer 渲染逻辑；若报告为空，检查是否误将 plugin 放在了build配置块内而非plugins数组中
不写配置也能快速看体积：--report 参数（Vue CLI 专属）
如果你用的是 Vue CLI（尤其是老版本），最省事的方式是直接加参数启动分析，无需修改任何配置文件。
立即学习“前端免费学习笔记（深入）”；
- 运行：
npm run build --report（注意双横线） - 构建完成后，
dist/report.html就是交互式体积图 - 这个功能由 Vue CLI 内置支持，本质仍是调用
webpack-bundle-analyzer，只是做了封装 - ⚠️ 常见失效场景：项目已升级到 Vue CLI 5+ 且禁用了内置 analyzer；或者
package.json中的build脚本被重写覆盖（比如改成vite build），此时该参数无效
真正容易被忽略的点是：可视化报告只反映当前构建产物的静态结构，它不告诉你“哪些代码没被 Tree-shaking 掉”，也不自动指出“某个 lodash 方法是否真被用到”。要精准瘦身，得先看报告定位大模块，再结合 import 语句、sideEffects 字段、以及实际运行时的 coverage 检查，三者交叉验证。否则，光靠一张饼图删文件，可能删掉的是正在用的逻辑。
