阅读 210

vue的首页优化小记

我做首页优化本来是为了解决vue的首页白屏问题的,但是把资源从1.1m优化到了270kb还有会出现白屏的问题,效果没有预期的好,因为白屏不只和资源大小有关。搜了一下说解决首页白屏还是SSR服务端渲染效果好。

资源大小是减小的很明显的,我就通过这篇文章来分享且记录一下,有说的不对的还请大家留言告诉我,谢谢~

先放一张没有做优化的资源大小的图片:

未优化
可以注意一下此时资源的大小和数量,后面我们会有明显的变化。而时间,变化的程度没有资源大小那么明显。代码都是在虚机上运行的,时间比实机上面长了一些。

一、组件异步加载

什么是组件的异步加载呢?换个说法就是按需引入。

在大型应用中,我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。为了简化,Vue 允许你以一个工厂函数的方式定义你的组件,这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数,且会把结果缓存起来供未来重渲染。

开始学习vue的时候,我们都是通过import引入组件,然后在components中使用组件。 代码如下:

import EventCalendar from '@/components/EventCalendar';
export default {
	...
	components: {
		EventCalendar
	}
	...
}
复制代码

如果我们异步加载组件,那么首页请求的到资源就会相应的减少,因为它只在需要的时候才从服务器加载一个模块。 异步加载组件的代码:

export default {
	...
	components: {
		EventCalendar: () => import('@/components/EventCalendar'),	// 异步组件,按需引入。加载哪里哪里会先显示
	}
	...
};
复制代码

这一步的截图我没有单独截下来,我会放在接下来的第二步中来展示。不过我的demo这一二步的效果并不明显,因为我的首页和我的其他路由下的组件只更换了两个组件,如果区别很大的话,效果应该会明显一些。

给出官网的链接,有兴趣的朋友可以仔细看一下。

二、路由懒加载

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

同样的,先贴出刚开始学习的时候写vue-router的写法:

import Vue from 'vue';
import Router from 'vue-router';
import Portal from '@/components/Portal';

Vue.use(Router);

export default new Router({
	routes: [
		{
			path: '/',
			name: 'portal',
			component: Portal
		}
});
复制代码

然后按照官方的写法做路由懒加载:

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
	routes: [
		{
			path: '/',
			name: 'portal',
			component: resolve => require(['@/components/Portal'], resolve)
		}
});
复制代码

那么我们来看一下做完一二步处理的效果:

2 组件异步加载和路由懒加载
没错,在我这里资源的大小居然没有任何变化,依然是1.1m,因为我做了这些处理以后,其实首页还是加载差不多的东西,只少加载了一个组件而已,所以看不太出来大小的区别。(看到这里别放弃,后面做完以后,会有很大区别的!)

但是,我们可以看到资源的数量增加了,因为我们做了组件的按需引入和路由的懒加载,这时webpack就不会把我们自己写的代码都打包到app.js里面了,而是分出了1,2,3....若干个js,在需要的时候才加载它们。当我们的网站做复杂了以后,就应该会看出区别来了。

而此时的时间上区别也不大,甚至比刚才没做处理的时间还稍微的长了那么一丢丢,但是DOMContentLoaded少的还是挺明显的。

还是附上官网的链接,大家有兴趣进去看一下~

三、Element按需加载

我们很可能会用到element或者是Mint UI这种库,如果它正好支持按需加载就最好了,通过按需加载库的组件,我们可以大大减少资源的大小~ 这里我就不再放代码了,直接看官网就可以了,注意.babelrc一定要修改对啊,不然找不到各个组件对应的.css文件。 直接放效果图:

element按需加载
效果杠杠的,直接从1.1m干到了746KB,时间上也能看到减少了一些。资源数量没变,还是打包到了vendor.js里面,可以看出来,vendor.js瘦身了很多。 最后,还有一步杀招,效果相当惊艳,我们继续谈。

四、gzip

这里我用的是nginx。 我们找到nginx中的 conf文件夹 -> nginx.conf中的server,做如下修改

http {
...
	gzip  on;  //把原本的gzip的#注释去掉 
	gzip_static on;
	gzip_buffers 4 16k;
	gzip_comp_level 5;
	gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-http-php image/jpeg image/gif image/png;
	
	server {
		listen       7077;	
		...
		location /api {						
			rewrite ^/api/(.*)$ /$1 break;
			proxy_pass http://10.200.9.74:8088;
		}
	}
}
复制代码

然后来看看效果:

gzip
270KB。从1.1m就这么简单的瘦身到了270KB。虽然时间上面变化并不大,但是DOMContentLoaded的变化还是挺明显的。

如果没搞过nginx想简单的弄一下nginx,可以看一下我的另一篇关于nginx的。我也是为了搞这个gzip才接触的nginx的,里面简单的写了一下我用nginx弄这个Vue项目的配置过程。

至此,Vue的首页优化就完工了,首页白屏的问题,依然还存在,但是稍微的好了一些。 我们可以再通过骨架屏等手段来完善了,如果可以用SSR那就更好了。

这里推荐另一篇文章,他里面的第二点是写在webpack压缩打包时的优化,可以节约大量的时间。

五、CDN引入

这个是在我写完这篇文章以后看到的,文章在这里:Vue首页加载速度优化,大家可以用起来看看效果

感谢大家的阅读~

参考文章

vue首屏加载优化 Vue官网 Vue-Router官网 Element

关注下面的标签,发现更多相似文章
评论