vue spa 开发，首次加载速度太慢！

Question

下图中是 webpack 打包出来的 app.js：

1.7M 大小，加载了 7s！这速度简直要逆天，虽然这仅在首次加载的时候会产生，但这速度没法忍受啊！请问有什么解决办法？

Answer 1

正如楼上所说 路由懒加载确实能够优化首页加载速度，除此之外还有几点：

1. 将绝大部分依赖使用cdn引入
2. 如果首页有大量图片的话，降低图片质量，图片最好使用第三方OSS，而非本地
3. 如果使用第三方UI框架，如Element，请按需引入，切勿全局引入
4. 服务端开启gzip 1～10个等级按照实际需求选择
5. 以上几点若还不能满足需求，请考虑首页服务端渲染

注： 如何查看各个依赖打包后大小，进入package.json,在scripts增加配置

"build-report": "npm run build --report"

然后 npm run build --report 即可查看，可将较大的插件使用cdn，试具体情况

Answer 2

路由懒加载

Answer 3

路由这样写，app.js就不会那么大了

{
  path: '/home',
  name: 'home',
  component: () => import('@/components/home/home'),
  meta: {
    title: '首页'
  }
}

Answer 4

你这是路由一次引入了，采用楼上写法，打包会把模块分在不同文件，按需加载， cli 3.10后dev模式依然会看到初始加载了很多js，都是分开的，但是换成生产模式就是按需加载了