先说说项目背景：这是一个电商类应用，用的是Vue 2，组件嵌套深，数据量大。一开始我们以为是接口慢，但检查后发现后端响应时间正常，问题出在前端。用Chrome DevTools一分析，好家伙，打包后的JS文件超过2MB，还有一堆未使用的组件在初始化时全加载了，导致首屏渲染阻塞。另外，列表页用了v-for渲染上千条数据，DOM节点爆炸，滚动时频繁重排重绘，不卡才怪。
针对首屏加载，我们首先从代码分割入手。Vue Router支持懒加载，我们把路由改成了动态导入。比如，商品详情页原来直接引入组件，现在改成这样：
这样，只有用户点击进入详情页时，才加载对应代码。另外，Webpack配置里用了SplitChunksPlugin，把第三方库如Vue和Axios拆成单独chunk，避免主包过大。经过这一步，主JS文件从2MB瘦身到800KB，首屏加载明显快了不少。
接下来处理列表卡顿问题。我们试过用v-if和v-show优化，但效果有限，因为数据量实在太大。后来引入了虚拟滚动方案，用vue-virtual-scroller库实现。原理是只渲染可视区域的元素，减少DOM节点数。代码大致这样：
实测下来，万级数据的列表滚动流畅多了，内存占用也降了70%。不过要注意，虚拟滚动对动态高度支持不太好，我们提前计算了 item 高度，避免布局错乱。
另一个优化点是图片懒加载。商品图多且大，我们用了Vue指令实现滚动加载。自定义一个v-lazy指令，监听元素是否进入视口，再动态设置src。这样，初始加载时只请求首屏图片，其他图片随滚动逐步加载。代码示例：
搭配上图片压缩和CDN，图片加载时间减少了一半。
缓存策略也没落下。对于静态资源，我们设置了强缓存，比如JS和CSS文件加hash后缀，利用浏览器缓存减少重复请求。另外，API响应用了LocalStorage缓存部分频繁请求的数据，比如用户信息，避免每次进页面都重新拉取。
最后，我们还用Vue Devtools检查了组件渲染性能。发现有个表单组件频繁触发更新，是因为用了深度watch。改成浅比较后，重渲染次数大幅减少。同时，在Production模式启用Vue的productionTip关闭，避免开发环境警告影响性能。
总结这次优化，核心就是按需加载和减少不必要的计算。代码分割、虚拟滚动、图片懒加载这些手段组合起来，效果立竿见影。当然，每个项目情况不同，建议先用性能分析工具定位瓶颈，再针对性下手。优化是个持续过程，我们后续还计划上SSR和PWA，进一步提升体验。大家有啥好法子，欢迎在评论区交流哈！