vue spa 开发,首次加载速度太慢!

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

clipboard.png

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

回答:

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

  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,试具体情况

回答:

路由懒加载

回答:

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

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

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注