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

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

时间2025-09-17 03:48:37分类IT科技浏览5440
导读:一、Spa单页面的加载过程 1、首先就是html,也就是FP阶段...

一               、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>

以上为个人经验                      ,希望能给大家一个参考                ,也希望大家多多支持本站                      。

声明:本站所有文章    ,如无特殊说明或标注                      ,均为本站原创发布                    。任何个人或组织                    ,在未征得本站同意时,禁止复制                      、盗用                、采集    、发布本站内容到任何网站                      、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益                  ,可联系我们进行处理                  。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
groove是什么(GroovyHelp 3.2.7 GA发布 行业应用 ITeye资讯) 面积最大的岛屿是哪个岛屿(从 695. 岛屿的最大面积 入手深度优先搜素DFS)