第一次写 vue spa项目,但是在实践的过程发现了很多坑,这篇文章主要讲述的是spa项目首屏加载过慢的大坑。
在webpack的配置中,在打包的过程中,会将所有的库都打包到vendor.js中,所以导致了vendor.js这包过大,而页面要想出现数据必须在vendor.js加载完成以后,所以后面所做的努力基本就是想办法把vendor.js的体积变小。
1.externals
在webpack.base.conf.js这个文件中,module.exports输出的对象里面加一个key 叫做 externals,配置如下
//webpack.base.conf.js
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
// 'vue-lazyload': 'VueLazyload',
'moment': 'moment',
// 'element-ui': 'element-ui'
}
//index.html
<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/axios/0.11.0/axios.min.js"></script> -->
<!-- <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script> -->
<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment.js"></script>
<script src="https://cdn.bootcss.com/element-ui/1.3.7/index.js"></script>
externals的左边是给 require用的 ,右边是给全局调用的。建议使用bootcdn,相对来说算是比较快的cdn了。
还有一种是dll打包,目前没有实践过,下次可以试试。
2.开启gzip
后端用的是nginx,稍微配置即可开启gzip
sudo nano /etc/nginx/nginx.conf
在Gzip Settings里加入:
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;
开启了以后,js、css相关的代码可以压缩将近5倍的体积。
3.开启路由懒加载
开启了以后不同的路由组件可以分成不同的代码,从而实现进入相应页面以后才加载相关代码。
在官方文档中有相关实现的代码,很简单。
//引入的时候改成懒加载的形式
const admin = resolve => require(['../views/admin.vue'], resolve);
4.bundleAnalyzerReport检测包的情况
在config/index.js中一个相关插件叫做bundleAnalyzerReport,上面有几行注释,讲的是只要在打包的时候输入npm run build –report,就可以在打包的同时查看每个打包生成的js,里面的库的构成情况,方便我们进行相关的删减,比如有的库太大了,是否可以自己实现,有的库是否有必要,可否删除之类。
5.服务端加载
额,这个太难搞了,刚入行node.js只会npm这一点相关知识,以后有空要好好学学,听说通过nuxt.js是比较容易上手,还得以后慢慢实践。毕竟首屏加载,seo优化都得靠SSR(service side render)了。