代码分割（Code Splitting）做不好反而拖慢应用——过度分割导致大量网络请求，分割不足又达不到按需加载效果，还可能遇到共享模块重复、第三方库拖累等陷阱。
常见问题：过度分割产生过多小chunk，网络开销累积；分割不足使chunk仍过大；分割点错误造成瀑布延迟；共享模块因配置不当被重复打包；大型第三方库意外增大chunk体积。
诊断工具：使用 Webpack Bundle Analyzer 或 Vite Visualizer 查看bundle结构；浏览器Network/Performance Tab检查请求瀑布和解析时间；Lighthouse审计报告直接标记大JS包和长主线程任务。
优化策略：基于路由分割（React.lazy+Suspense、Vue async components、Angular lazy loading）；组件级分割（弹窗、图表等非关键组件）；条件加载（用户角色/Feature Flag）；利用 splitChunks 提取 vendor、runtime、共享模块缓存组；配合 webpackPrefetch/webpackPreload 预加载；启用 Tree Shaking 和代码压缩（Terser、Gzip/Brotli）；最后通过 CDN 分发静态资源。
持续监控：设定性能预算（JS包大小/加载时间），在CI/CD管道中集成 Lighthouse CI 自动化测试，并部署RUM工具收集真实用户数据，及时捕捉回归。
优化代码分割不是一次性工作，需要结合模块化架构设计、定期审查依赖、在Code Review中加入性能意识，才能让应用真正又快又稳。
#开发者 #工具 #CodeSplitting #前端性能 #Webpack #Vite #Lighthouse #JavaScript #性能优化 #BundleAnalyzer
@DevToolboxHub