vue 首页加载，速度优化及解决首页白屏问题_vue进入加载的首页(1)

最新推荐文章于 2024-07-01 22:52:36 发布

2401_84419493

最新推荐文章于 2024-07-01 22:52:36 发布

阅读量577

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84419493/article/details/138951874

版权

程序员专栏收录该内容

197 篇文章 1 订阅

订阅专栏

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

一、Spa单页面的加载过程

1、首先就是html,也就是FP阶段

<div id="app"></div> 

页面在导航后首次呈现出不同于导航前内容的时间点,有一个东西回来渲染在页面上了

2、然后是静态资源css，js，之后解析js，生成HTML,也就是FCP阶段，css,js资源加载下来了，首次的内容绘制，有一个大结构了

<div id="app">
  <div class="header"></div>
</div>
比如app根目录里面有一个header,div

3、最后,就是FMP,ajax请求数据之后,首次有效绘制,就是页面加载差不多了，但是可能图片还没加载出来

4、总结:

从FP到FMP这个过程全是白屏，可能你的header如果有啥大背景色啊，这个背景色或许会出来,ajax之后，才会真正去解析我们的数据,把数据放入我们的html标签中

二、首页加载慢的原因.

在vue项目中，引入到项目中的js,css都会被打包进入vendor.js,如果引入的第三方库众多，最后打包后的vendor.js就会体积庞大，浏览器再加载该文件后才会进入首屏，如果vendor.js体积过大，那么加载的时间就越久，白屏的时间就越长

三、加载速度慢解决方案

1、分离打包第三方资源包

在build文件夹下的webpack.base.conf.js中配置externals可以分离打包第三方资源包，key是依赖包的名称，value是源码抛出来的全局变量,这样打包后这些文件就不会打包到vendor.js 和app.js中，会大大减少打包体积。(尤其是你的项目用了多个三方库)

这个做法就是可以不把这些资源打包到bundle和vendor.js中，而是在运行时去获取需要的依赖和资源，大大减少打包的体积。

2、第三方库使用CDN引入

在项目开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，但也会有一些不能按需引入，我们可以采用CDN外部加载，在index.html中从CDN引入组件，去掉其他页面的组件import，修改webpack.base.config.js，在externals中加入该组件，这是为了避免编译时找不到组件报错。

//这里是我再项目中的配置
//切记只适用于测试，要是上线一定是购买付费的
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>

3、vue-router路由懒加载

这个是相当重要的一步,这步会大大减少打包后的体积，提升加载速度

在访问到相关页面才加载对应的路由和资源，才是正确的，否则全在初始化项目时加载，那么首屏时间就会很久。

举例说明：
路由懒加载模式配置

let routes = [
    {
        path: '/map', //地图
        name: 'map',
        component: resovle => require(['@/pages/map'],resovle),
        meta: { noRequiresAuth: true },
    },
    {
        path: '/redirectLogin', //支付回跳
        name: 'redirectLogin',
        component: resovle => require(['@/pages/site/redirectLogin'],resovle),
        meta: { noRequiresAuth: true },
    }
]

非----懒加载模式配置 router.js配置

import Vue from 'vue';   //这句话可以直接删掉的，因为配置了externals
//import Router from 'vue-router';
//import login from '@/pages/site/login';
采用require方式代替import
const Router = require('vue-router');
const login = require('@/pages/site/login');
Vue.use(Router);
let routes = [
    {
        path: '/login', //登陆
        name: 'login',
        component: login,
        meta: { noRequiresAuth: true },
    },
]