性能优化--通过优化首屏加载速度实现.md 3.66 KB
title: 性能优化--通过优化首屏加载速度实现         
date: 2022/5/24 14:30
tags:                    
- 前端
- 路由懒加载
- 性能优化             
author: 刘磊

什么是路由懒加载

路由懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。在单页面应用中浏览器默认会将所有的资源全部下载下来,这可能会导致首屏加载的时间过长。路由懒加载可以做到点击对应的路由再加载对应的文件资源

路由懒加载的三种写法 (推荐用法:es6的import)

  1. component: resolve => require(['../pages/home], resolve)
  2. component: import(/* webpackChunkName: 'ImportFuncDemo' */ '../pages/home')
  3. component: resolve=>{require.ensure(,()=>{resolve(require('../pages/home'))})}

路由懒加载使用中的疑惑

项目中已经使用了路由懒加载为什么首屏渲染仍然请求了所有路由的chunk; 解答:vue-cli webpack中默认配置了prefetch这个功能可以在浏览器闲置时加载网站未来可能会用到的资源;但 经过验证这个prefetch预请求阻塞了首屏的加载

解决prefetch影响首页加载问题

  • 在webpack配置中删除prefetch插件
configplugins.delete(prefetch)
  • 在引用时配置
import(<!--webpackChunkName:'[...]',webpackPrefetch:false-->)

思考:既然可以通过import异步加载路由组件,非路由组件是否可以通过异步加载的方式,从而优化首屏的加载速度?很多情况中复杂的弹窗等组件比页面组件的资源更大。

  • 经过查阅文档发现VUE官方也提到了异步组件,并有相关的用法
  • 通过异步引入的弹窗组件从主包分离出来,但是仍然在首页加载是就将弹窗组件加载出来。并未实现点击组件时 再去加载文件:
const wechatEnter = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import(
    /*webpackChunkName:'wechatEnter',webpackPrefetch:true */ '@/views/index/components/wechatEnter.vue'
  ),
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
// 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 则使用加载失败时使用的组件。默认值是:`Infinity`
  timeout: 3000,
})

利用webpack——SplitChunks优化

SplitChunks 插件来控制 Webpack 打包生成的 js 文件的内容的精髓在于:防止模块被重复打包,拆分过大的js 文件,合并零散的js文件;

每个浏览器并发请求数量不同,分包需要考虑并发

由于并发数量的限制,对于splitchunks的分包并不是越多越好。需要具体情况具体分析,比如并发请求数量设置为4,目前有三个包一个包体积较大,那么这时候对大包拆成两个包加载速度肯定会有提升;如果本来有4个包,并发数量也是4,这时候拆个包出来如果包的体积也不大,第5个包请求的时间加上队列之间多出来的时间,综合下来谁快谁慢还不好说;最好的办法还是对静态资源做多域名请求;

通过CDN引入第三方库,但是这个有风险,就是第三方库挂掉或者什么的,可以选择付费的cdn加速。或者下载到本地上传到自己的服务器,总共三套方案,可以同时使用,保证安全性。

静态资源压缩,代码压缩,图片压缩;gzip压缩一定要开,并且服务端配合开一下,真的很重要。开启gzip后你会发现加载速度有质的提升,尤其是你的vendor.js和app.js体积过大的时候。

代码层面的优化