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

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

时间2025-05-04 21:41:12分类IT科技浏览3154
导读:一、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
mmc.exe在哪里(kavmm.exe是什么进程 kavmm进程查询) python for循环(python UTF-8编码是什么)