在 Vue 项目构建过程中，vendor 打包产物体积偏大，通常采取哪些技术手段来优化和压缩其大小？

回答思路

1. 【回答框架 1】明确 vendor 文件指第三方依赖库被打包成的独立 chunk，体积大主要因库代码多且常未按需引入。
2. 【回答框架 2】分析原因：全部引入依赖（如 import 整个 UI 库）、未开启代码分割、缺少压缩与 tree shaking。
3. 【回答框架 3】解决方案一：路由级与组件级懒加载，使用动态 import() 分割代码，减少首屏 vendor 体积。
4. 【回答框架 4】解决方案二：按需引入第三方库（如 Element UI 的 babel-plugin-component）、配置 externals 将公共库通过 CDN 引入，减小打包体积。
5. 【回答框架 5】解决方案三：开启生产环境压缩（Terser 去掉注释与警告）、使用 Webpack Bundle Analyzer 分析体积，并配合 Gzip 压缩传输。
6. 【关键点 1】动态 import() 实现代码分割，按需加载路由或组件。
7. 【关键点 2】按需引入 UI 库和配置 externals 以削减库代码。
8. 【关键点 3】使用压缩插件与 CDN 分散 vendor 压力，并用分析工具定位臃肿模块。
9. 【易错点 1】过度分割导致请求数增多，需平衡懒加载粒度与网络请求开销。
10. 【易错点 2】配置 externals 后需确保 CDN 可用性，否则运行时依赖缺失。
11. 【易错点 3】不能只依赖压缩，未结合 tree shaking 时体积优化有限。