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

2024-12-24 02:18:07

项目背景

测试环境的管理后台应客户需求最近加了点东西，加载的东西变多，使得整个项目变得有点臃肿了，首屏以及刷新后渲染速度变得极其缓慢。之前10s左右还能勉强接受，这次一下干到30s，整个人都崩溃了，花了点时间优化了一下。

环境：vue：2.6.11，vue-cli：3.0

splitChunks

看到上面图片里的文件其实并不大，最大的也就287k。

这也是优化过的，之前都是有的最大为1m左右，在vue.config.js配置splitChunks，这样针对的大文件都变小了，但是时间上并没有提升多少。只不过是性能优化了一点。

chainWebpack: config => {
        if (process.env.NODE_ENV === "production") {
            config.optimization.splitChunks({
                chunks: "all",
                maxInitialRequests: 4,
                cacheGroups: {
                    default: {
                        name: "common",
                        minChunks: 5, // 模块被引用2次以上的才抽离
                        priority: 1,
                        reuseExistingChunk: true, // 复用公共模块
                    },
                    vendors: {
                        // 默认拆分node_modules
                        test: /[\\/]node_modules[\\/]/,
                        minChunks: 1, // 默认1
                        priority: 10,
                        name (module) {
                            // get the name. E.g. node_modules/packageName/not/this/part.js
                            // or node_modules/packageName
                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                            // npm package names are URL-safe, but some servers don't like @ symbols
                            return `npm.${packageName.replace('@', '')}`
                        }
                    },
                    elementUI: {
                        name: "chunk-elementUI", //  split elementUI into a single package
                        priority: 20, //  the weight needs to be larger than libs and app or it will be packaged into libs or app
                        test: /[\\/]node_modules[\\/]_?element-ui(.*)/, //  in order to adapt to cnpm
                    },
                    echarts: {
                        name: "chunk-echarts", //  split elementUI into a single package
                        priority: 30, //  the weight needs to be larger than libs and app or it will be packaged into libs or app
                        test: /[\\/]node_modules[\\/]_?echarts(.*)/, //  in order to adapt to cnpm
                    },
                    xlsx: {
                        name: "chunk-xlsx", //  split elementUI into a single package
                        priority: 20, //  the weight needs to be larger than libs and app or it will be packaged into libs or app
                        test: /[\\/]node_modules[\\/]_?xlsx(.*)/, //  in order to adapt to cnpm
                    },
                    editor: {
                        name: "chunk-editor", //  split elementUI into a single package
                        priority: 50, //  the weight needs to be larger than libs and app or it will be packaged into libs or app
                        test: /[\\/]node_modules[\\/]_?vue-json-editor(.*)/, //  in order to adapt to cnpm
                    },
                },
            });
        }
    },

CDN

通过上面的那步，文件变小了，但是对于一些文件来说echarts、XLSX、element-ui来说，还是加载有点久。配置CDN后，也就几百毫秒久加载完成了。

先在index.html配置，顺序不要变，vue在首先引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_830376_qzecyukz0s.css" rel="external nofollow" >
    <!-- 引入 element ui.css -->
    <link href="https://cdn.bootcss.com/element-ui/2.15.7/theme-chalk/index.css" rel="external nofollow"  rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.15.7/index.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
    </div>
    <!-- built files will be auto injected -->
  </body>
  <script src="https://cdn.bootcss.com/echarts/3.7.0/echarts.min.js"></script>
  <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
</html>

接下来在vue.config.js配置，element-ui上面要先把vue配置好

configureWebpack: (config) => {
    return {
        externals:{
            'vue': "Vue",
            'echarts': 'echarts',
            'element-ui': 'ELEMENT',
            XLSX: "XLSX",
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery",
            }),
        ],
    };
},

然后把main.js引入的vue、elementui、echart、XLSX全部注释掉

如果要用的话直接使用。例如：

//某些js文件引入elementui
ELEMENT.Message.error(error.message)
//echarts
this.myMiddleChart = echarts.init(this.$refs.myChart);//自己加的代码
this.myMiddleChart.setOption(this.option)
this.lineChart = echarts.init(this.$refs.lineChart);//自己加的代码
this.lineChart.setOption(this.lineOption)
let table = document.getElementById('table');
let worksheet = XLSX.utils.table_to_sheet(table);
let workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'sheet');
// 以上四行也可以直接一行搞定，如果不需要对表格数据进行修改的话
let workbooked = XLSX.utils.table_to_book(document.getElementById('table'))
XLSX.writeFile(workbooked, '报表.xlsx');

GZIP

使用CDN引入，特定资源加载速度确实变快了，但是大多数文件加载还是比较慢的，加载资源也比较大。

在vue.config.js配置如下

configureWebpack: (config) => {
  return {
      externals:{
          'vue': "Vue",
          'echarts': 'echarts',
          'element-ui': 'ELEMENT',
          XLSX: "XLSX",
      },
      plugins: [
          new webpack.ProvidePlugin({
              $: "jquery",
              jQuery: "jquery",
              "windows.jQuery": "jquery",
          }),
          new CompressionPlugin({
              algorithm: "gzip", // 使用gzip压缩
              test: /\.js$|\.html$|\.css$/, // 匹配文件名
              filename: "[path].gz[query]", // 压缩后的文件名(保持原文件名，后缀加.gz)
              minRatio: 0.8, // 压缩率小于1才会压缩
              threshold: 10240, // 对超过10k的数据压缩
              deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
          }),
      ],
   };
},

然后去服务器上，找到nginx，对制定的服务开始gzip压缩

# 开启gzip
gzip on;
# 低于1kb的资源不压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小
gzip_buffers 4 16k;
# 压缩级别【1-9】，越大压缩率越高，同时消耗cpu资源也越多，建议设置在4左右。
gzip_comp_level 4;
# 需要压缩哪些响应类型的资源，缺少自己补。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml;
# 配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_disable "MSIE [1-6]\.";
# 是否添加“Vary: Accept-Encoding”响应头，
gzip_vary on;

删除文件预加载

以上搞完之后，首屏加载速度确实有提升。

但是页面刷新还是有点慢，mac和windows加载速度不一致，mac更慢一点。用lighthouse跑了一下，还是不行。速度的话windows10s，mac19s，还是不行。加载的空白时间还是过长。

因为 vuecli 3默认开启 prefetch(预先加载模块)，提前获取用户未来可能会访问的内容

我看了一下，我每次刷新后回预加载11个路由，这的确很慢。体验没有那么好。于是我把这个预加载给删了

chainWebpack: config => {
//删除预加载
config.plugins.delete('prefetch')
   if (process.env.NODE_ENV === "production") {
       config.optimization.splitChunks({
           chunks: "all",
           maxInitialRequests: 4,
           cacheGroups: {
               default: {
                   name: "common",
                   minChunks: 5, // 模块被引用2次以上的才抽离
                   priority: 1,
                   reuseExistingChunk: true, // 复用公共模块
               },
               vendors: {
                   // 默认拆分node_modules
                   test: /[\\/]node_modules[\\/]/,
                   minChunks: 1, // 默认1
                   priority: 10,
                   name (module) {
                       // get the name. E.g. node_modules/packageName/not/this/part.js
                       // or node_modules/packageName
                       const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                       // npm package names are URL-safe, but some servers don't like @ symbols
                       return `npm.${packageName.replace('@', '')}`
                   }
               },
       });
   }
 },

这样整体的加载速度，提升到3s，最快的时候1.7s就可以加载完成。

Lighthouse的分数也跑到66分，也算及格了，最开始只有33。

家里的网跑到75，绝绝子

到此这篇关于Vue首评加载速度及白屏时间优化详解的文章就介绍到这了,更多相关Vue加载优化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue如何提升首屏加载速度实例解析

在Vue项目中,引入到工程中的所有js.css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏.若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验. 这是优化前的页面加载状态:执行npm run build打包项目,出来的vendeor.js文件,基本都是1M以上的的巨大文件,没有用户能忍受5s以上的loading而不关闭页面的,如图所示: 当项目在挂载到服务器上,平均都是10S以上加载出来,好家伙这加载时间,仿佛过了半个世纪,很烦人,
Vue防止白屏添加首屏动画的实例

单页应用有个无法避免的问题就是首屏加载慢,虽然可以通过gzip.路由懒加载.CDN.提高服务器带宽等手段,首屏加载速度仍然比传统多页应用慢一些. 为了提高用户体验,首屏添加loading动画很有必要,并且实现特别简单. vue-cli3生成的项目中,打开index.html会发现如下代码 <body> <noscript> <strong>We're sorry but doesn't work properly without JavaScript enabled.
vue-router懒加载速度缓慢问题及解决方法

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

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

目录 vue页面刷新产生白屏 vue页面白屏的原因及优化一.原因二.解决办法 vue页面刷新产生白屏 app.vue <template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { pr
详解vue项目首页加载速度优化

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

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

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

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

IOS中Weex 加载 .xcassets 中的图片资源的实例详解前言: 因为 .xcassets 中的图片资源只能通过 imageNamed: 方法加载,所以需要做一些特殊处理,才能提供给 Weex 使用(PS:纯属娱乐,因为 Weex 跨平台的特性,这种针对某一端做实现的方案实用价值并不大). 方案观察 WeexSDK 发现有 WXImgLoaderProtocol 这个协议,这个协议包含了下面的方法: - (id<WXImageOperationProtocol>)downloadI
Kotlin对象的懒加载方式by lazy 与 lateinit 异同详解

目录前言 lateinit by lazy 总结前言属性或对象的延时加载是我们相当常用的,一般我们都是使用 lateinit 和 by lazy 来实现. 他们两者都是延时初始化,那么在使用时那么他们两者有什么区别呢? lateinit 见名知意,延时初始化的标记.lateinit var可以让我们声明一个变量并且不用马上初始化,在我们需要的时候进行手动初始化即可. 如果我们不初始化会怎样? private lateinit var name: String findViewById<Bu
Android异步加载数据和图片的保存思路详解

把从网络获取的图片数据保存在SD卡上, 先把权限都加上网络权限 android.permission.INTERNET SD卡读写权限 android.permission.MOUNT_UNMOUNT_FILESYSTEMS android.permission.WRITE_EXTERNAL_STORAGE 总体布局写界面,使用ListView,创建条目的布局文件,水平摆放的ImageView TextView 在activity中获取到ListView对象,调用setAdapter()方法
JVM加载class文件的原理机制实例详解

目录一.JVM简介二.JVM的组成部分三.JVM加载class文件的原理机制一.JVM简介 JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的. Java语言的一个非常重要的特点就是与平台的无关性.而使用Java虚拟机是实现这一特点的关键.一般的高级语言如果要在不同的平台上运行,至少需要编译成不同的目标代码.而引入Java语言虚拟机后,Java语言在不同
js window.onload 加载多个函数和追加函数详解

平时做项目经常需要使用window.onload, 用法如下: function func(){alert("this is window onload event!");return;} window.onload=func; 或者如下: window.onload=function(){alert("this is window onload event!");return;} 但window.onload 不能同时加载多个函数. 比如: function t
微信小程序图片加载（本地，网路）实例详解

在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片加载网络图片加载本地图片 <image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill"> </image> src="/image/arrowright.png" 这句就是加载本地图片资源的.想想iOS中的加载本地图片,imageName:,类似.
JS实现加载和读取XML文件的方法详解

本文实例讲述了JS实现加载和读取XML文件的方法.分享给大家供大家参考,具体如下: 有时在开发时用到 JS 加载和读取XML文件的情况,写下提供参考,这里主要是分两步完成: 1. JS加载XML文件步骤一般为(1),建立 XML DOM 对象:(2),设置加载方式,异步(推荐)或同步: (3)提供XML文件URL然后调用 load 方法:大致如下: var xmlFileName="xxFile.xml"; var xmlDoc=''; if (window.ActiveXObjec

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

目录

项目背景

splitChunks

CDN

GZIP

删除文件预加载

相关推荐

随机推荐