如何优化Vue首页加载速度，解决白屏问题？
- 内容介绍
- 相关推荐
本文共计1914个文字，预计阅读时间需要8分钟。
目录
一、Spa单页面加载过程
二、首页加载慢的原因
三、加载速度慢的解决方案
1. 分离打包第三方资源包 2. 第三方库使用CDN引入 3. vue-router路由懒加载 4. 静态资源压缩，代码压缩目录
- 一、Spa单页面的加载过程
- 二、首页加载慢的原因
- 三、加载速度慢解决方案
- 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="cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" /> <script src="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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。
本文共计1914个文字，预计阅读时间需要8分钟。
目录
一、Spa单页面加载过程
二、首页加载慢的原因
三、加载速度慢的解决方案
1. 分离打包第三方资源包 2. 第三方库使用CDN引入 3. vue-router路由懒加载 4. 静态资源压缩，代码压缩目录
- 一、Spa单页面的加载过程
- 二、首页加载慢的原因
- 三、加载速度慢解决方案
- 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="cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" /> <script src="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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。