同事因为加载速度被开除了，我用Vue救活活动页面的故事

上周三下午三点，运营小妹气冲冲跑进技术部："双十一活动页加载要8秒！用户都跑光了！"我后背瞬间湿透——上个月刚优化过的页面啊。摸着保温杯里凉透的枸杞茶，我决定用Vue再战江湖。

一、代码拆包就像收拾熊孩子的玩具箱

看着项目里那个1.2MB的vendor.js，活像塞满各种玩具的储物箱。用webpack-bundle-analyzer一看，连十年没用的helloWorld组件都在里面。

1. 手动拆包大作战

// vue.config.js
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
echarts: {
test: /[\\\\/]node_modules[\\\\/]echarts/,
name: 'echarts',
chunks: 'all'
}

2. 路由懒加载实战

把原本挤在首屏的活动规则页改成：

const Rules =  => import('./views/Rules.vue')

优化项	优化前	优化后	数据来源
首屏JS体积	812KB	327KB	Lighthouse测试报告
可交互时间	4.8s	2.1s	Chrome DevTools

二、组件懒加载像自动感应灯

把藏在折叠区域的抽奖模块改造成：

   Powered By Z-Blog.