vue 首页加载,速度优化及解决首页白屏的问题

2024-10-17 19:27:03

一、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、静态资源压缩，代码压缩，图片压缩

（1）、开启gzip压缩，（这个需要服务端配合）

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

（2）、图片压缩，目前我才用的是阿里云的图片处理（付费的）效果比较好，或者有条件的话配置一台单独的图片服务器

（3）、尽量使用icon代替图片

（4）、 js代码压缩- - - -(webpack 自UglifyJsPlugin插件压缩js文件)

（5）、css 代码压缩- - - - (采用optimize-css-assets-webpack-plugin插件来压缩css代码)

5、不要滥用三方库

尽量一个项目只使用一个库，不要为了方便使用多个库而忽略了性能。

6、去掉编译中的map文件

为了避免部署打包体积过大，我们通常去掉源文件（就是打包后看不到源代码),打包后的体积会小很多，在config文件夹下的index.js文件中

module.exports = {
    build: {
        env: build_env,
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        productionSourceMap: false,     //这个设置为false就是去掉源文件
        // Gzip off by default as many popular static hosts such as Surge or Netlify
        // already gzip all static assets for you. Before setting to `true`, make sure
        // to: npm install --save-dev compression-webpack-plugin
        productionGzip: true,      //开启gzip
        productionGzipExtensions: [
            'js', 'css'
        ],
        // Run the build command with an extra argument to View the bundle analyzer
        // report after build finishes: `npm run build --report` Set to `true` or
        // `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    },
    }

7、代码层面的优化

（1）、项目组件化，去掉冗余的代码

（2）、正式环境去掉console.log

（3）、index.html页面中将js文件放到页面最底部，css文件放在<header>中使用link引入。

这么做的原因是因为浏览器渲染的机制是自上而下的，如果把js文件放到头部渲染，等js文件渲染完成才开始绘制页面，这样速度会很慢，并且会受到css渲染的阻塞，所以要把js文件放到最底部，并且一些没有关联性的文件可以采用异步加载

四、解决白屏，体验优化

上边已经讲述了优化问题，把所有的优化都做完之后，加载速度有了显著提升，把所有的优化都做完之后，加载速度有了显著提升}把所有的优化都做完之后，加载速度有了显著提升把所有的优化都做完之后，加载速度有了显著提升，但是再网慢的时候还是会有白屏，所以再白屏期间加骨架屏和loading就显得格外重要了。

<body>
    //这里亲测有效，放心使用
    <div id="app">
       // 我们只需要再这里添加loading图或者骨架屏，有人会说怎么控制它的显示隐藏啊，
       //不用担心，再项目初始化完成后会自动替换为你的页面。
       <div class="self-loading">
          页面正快马加鞭赶来，请耐心等待
      </div>
    </div>
</body>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

Vue首评加载速度及白屏时间优化详解

目录项目背景 splitChunks CDN GZIP 删除文件预加载项目背景测试环境的管理后台应客户需求最近加了点东西,加载的东西变多,使得整个项目变得有点臃肿了,首屏以及刷新后渲染速度变得极其缓慢.之前10s左右还能勉强接受,这次一下干到30s,整个人都崩溃了,花了点时间优化了一下. 环境:vue:2.6.11,vue-cli:3.0 splitChunks 看到上面图片里的文件其实并不大,最大的也就287k. 这也是优化过的,之前都是有的最大为1m左右,在vue.config.js配
详解vue项目首页加载速度优化

凡是做SPA的项目,特别是移动端的SAP项目,首屏加载速度必定是一个绕不过去的话题.接下来我就我们项目里的一些实践来做一下总结.希望抛砖引玉,如果各位有更好的方案,不吝赐教. 1: 针对第三方js库的优化我们项目里用到的第三方js库主要有:vue, vue-router, vuex, axio, 我们还用到了qiniu.大家知道这些依赖库的js文件都会被一起打包到vender那个js文件里面,如果这些你的第三方依赖库很多,很大的话,那就会导致vender这个文件很大,那首屏加载的速度肯定会被拖
vue项目首次打开时加载速度很慢的优化过程

目录 vue首次打开时加载速度很慢优化vue项目加载过慢问题发现问题优化方案优化方法 vue首次打开时加载速度很慢 1.使用 vue-router 懒加载解决首次加载时资源过多导致的速度缓慢问题当你的 SPA(单页应用程序)变得很复杂时,打包构建后的 js 包会变得非常大,以至于严重影响页面的加载时间.vue-router 支持 webpack 内置的异步模块加载系统.所以,那些使用较少的路由组件不必打包进 bundles 里,只要在路由被访问时按需加载. 懒加载路由写法: { pat
vue 首页加载,速度优化及解决首页白屏的问题

目录一.Spa单页面的加载过程二.首页加载慢的原因三.加载速度慢解决方案 1.分离打包第三方资源包 2.第三方库使用CDN引入 3.vue-router路由懒加载 4.静态资源压缩,代码压缩,图片压缩 5.不要滥用三方库 6.去掉编译中的map文件 7.代码层面的优化四.解决白屏,体验优化一.Spa单页面的加载过程 1.首先就是html,也就是FP阶段 <div id="app"></div> 页面在导航后首次呈现出不同于导航前内容的时间点,有一个东
基于vue 动态加载图片src的解决方法

好久没更博了,最近也不知道在忙啥,反正就是感觉挺忙的,在群里看到陆陆续续有刚入vue小伙伴问vue动态加载图片总是404的状况,这篇就简单的说明为什么会出现以及解决办法有哪些. 首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.p
vue页面加载闪烁问题的解决方法

v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成.而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性. 使用场景一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗.因此,如果需要频繁切换 v-sho
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题

Vue使用swiper插件时特别是轮播元素含有动态数据时可能会出现数据为空或者白屏的问题使用下面的方法可以解决(保证在数据请求之后再渲染页面) 页面结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide tpOne" v-if="topInfo"> <-- 此处为绑
浅谈VUE单页应用首屏加载速度优化方案

单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案使用CDN资源,减小服务器带宽压力路由懒加载将一些静态js css放到其他地方(如OSS),减小服务器压力按需加载三方资源,如iview,建议按需引入iview中的组件使用nginx开启gzip减小网络传输的流量大小 webpack开启gzip压缩若首屏为登录页,可以做成多入口,登录页单独分离为一个入口使用CDN资源,减小服务器带宽压力在index.html中引入cdn资源 ... <body> &
vue终极性能优化方案(解决首页加载慢问题)

目录前言 1.路由懒加载 2.打包文件中去掉map文件 3.CDN引入第三方库 4.gzip打包 1.npmi-Dcompression-webpack-plugin 2.在vue.config.js中配置 3.在NGINX中配置 5.终极大招,预渲染 1.cnpminstallprerender-spa-plugin--save-dev 2.vue.config.js 3.router.js 4.main.js 总结前言用vue开发项目上线以后,发现首页加载速度非常慢,如果项目比较大,甚
vue-router懒加载速度缓慢问题及解决方法

懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载. 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时. 简单的说就是:进入首页不用一次加载过多资源造成用时过长!!! 懒加载的方式: import Vue from 'vue' import