针对 Webpack 构建产物体积偏大的情况，请说明你的优化思路和具体手段。
考察说明
考查候选人对前端工程化中打包体积优化的理解与实践经验。
回答思路
- 【回答框架 1】定位分析先行：借助 webpack-bundle-analyzer 可视化依赖体积，识别大模块，用 speed-measure-webpack-plugin 分析构建耗时，找出优化切入点。
- 【回答框架 2】代码层面：开启 tree shaking，使用 ES Module 写法，配置 sideEffects:false 移除未用代码；拆分第三方库，通过 externals 或 DLL 预编译减少重复打包。
- 【回答框架 3】资源优化：小图片用 base64 内联，大文件用 CDN 并设置 hash 缓存；压缩 CSS 和 JS，使用 TerserPlugin 去除无用代码，CSS 使用 optimize-css-assets-webpack-plugin。
- 【回答框架 4】拆包策略：用 SplitChunksPlugin 将公共依赖和业务代码分离，按需加载路由页面，实现首屏最小化。
- 【关键点 1】使用 webpack-bundle-analyzer 分析体积分布
- 【关键点 2】开启 tree shaking 并配置 sideEffects
- 【关键点 3】利用 SplitChunksPlugin 拆分公共代码和业务代码
- 【关键点 4】资源压缩与 CDN 结合
- 【关键点 5】路由懒加载实现按需加载
- 【易错点 1】过度拆包可能导致请求过多，需平衡包体积和请求数
- 【易错点 2】tree shaking 依赖 ES Module，CommonJS 模块无法摇树
- 【易错点 3】DLL 配置复杂，维护成本高，新版本可考虑内置缓存