关键就在于把首屏体积压到几十KB这一量级。 剩下的内容，全部改成按需加载。

具体做法是：用动态import()把非首屏逻辑拆开，按路由来驱动分包，把公共依赖（如lodash/axios）单独提取出来，再配合preload/prefetch把加载时机卡准。

核心目标不变：把首屏控制在只加载几十KB，其他模块按需再取。

那块 5MB 的 JS“巨石”，不能一次性全丢给用户。必须拆成“真正用到时再加载”的小块。

具体怎么做，通常就落在四件事上：

• 动态导入
• 按路由拆包
• 抽离公共依赖
• 把加载时机卡准

用动态import()把非首屏逻辑摘出来

静态import会在构建时打进主包。哪怕那个模块只在弹窗里用一次，也会被提前加载。

换成import()后，打包工具就能自动把它拎出来，单独生成chunk。

• 把报表导出、PDF生成、图表渲染等功能封装成独立文件，比如pdfExporter.js、chartRenderer.js
• 在用户点击按钮或打开面板时再加载：button.addEventListener('click', () => import('./pdfExporter').then(m => m.export()))
• 避免在循环或高频事件（如scroll、input）里反复调用import()，否则可能瞬间触发几十个请求

按路由拆分，访问哪页才加载哪页的代码

单页应用天然适合这条路。进首页时，不加载后台管理代码；点进个人中心时，再拉对应的JS。

框架配合构建工具，通常就能自动完成这类拆分。

• Vue Router：{ path: '/admin', component: () => import('@/views/Admin.vue') }
• React Router v6.4+：element配合Suspense，loader返回import('./Admin').then(m => ({ Component: m.default }))
• 每个路由组件会生成独立chunk（如admin.a1b2c3.js），首次访问/时完全不下载它

提取公共依赖，避免重复打包

5MB里常有1MB+是lodash、axios、chart.js这类被多个页面共用的库。

如果不提取，它们就可能在每个路由chunk里重复出现，造成体积浪费。

• Webpack中配置optimization.splitChunks，设chunks: 'all'，并指定minSize和maxInitialRequests
• Vite默认启用build.rollupOptions.output.manualChunks，可按包名归类：vendor: ['lodash', 'axios']
• 给公共chunk加内容哈希名（如vendor.e8f9d2.js），浏览器长期缓存，更新一个页面不影响其他chunk缓存命中

用preload/prefetch控制加载时机

拆完之后，还要避免用户感受到“点了才开始下载”的卡顿。

重点不是只拆包，还要把下载时机安排好。

• 对关键路由（如登录后必进的首页），用提前拉取
• 对次要路由（如“帮助中心”），用rel="prefetch"在空闲时静默加载
• 注意prefetch只在浏览器空闲时触发，不会抢占主资源带宽

《夸克》非常好用的免费AI浏览器

下载APP查看