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

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

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

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！

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

2、第三方库使用CDN引入

3、vue-router路由懒加载

4、静态资源压缩，代码压缩，图片压缩

5、不要滥用三方库

6、去掉编译中的map文件

7、代码层面的优化

四、解决白屏，体验优化

---

一、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 },
    },
]

4、静态资源压缩，代码压缩，图片压缩

基础面试题

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

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

[外链图片转存中…(img-sAMgBRDo-1715827820258)]