关于vue首页优化的问题

最近一起在用vue 开发PC项目 有的是vue-cli构建的 项目挺大的 各种import导入了很多的模块
这几天领导突然说 要首页优化加载什么的 然后给了我一个链接 里面提到了三点优化建议
1、// 在index.html里引入这两个文件

<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>

2、去掉第三方js的import,因为在第一步已经通过script标签引用进来了。
3、把第三方库的js文件从打包文件里去掉
这个我就不理解了 我是通过vue-cli构建的项目 还需要通过第一种方式去引入vue.min.js这样的js文件吗
第三点了不是太明白 怎么操作的

回答:

你领导的方案我不予评价,我说说你的问题的看法:

  1. vue-cli的话,你看看你的代码有没有使用 commonchunkplugin插件进行公共文件切割,如果有,那么上面两个文件会被打包成为一个公共的js,和业务的js分开,这样子在业务代码改变的时候,如果你的命名规则是使用chunkhash的,那么公共js的文件名是不会变的,是会被缓存的

  2. 加载一个公共文件的速度,在http1.1的时代,还是要比加载上面两个js的速度要快的

  3. 通过上面那种方式引入的vue.js应该是一个完整版的vue,而在vue-cli中,由于.vue文件直接被vue-loader预处理过,其实引入的是一个runtime版本,详见这里,这个是要比完整版要小的

  4. 所以说vue项目的首屏优化加载,从代码加载的角度来说,你领导给的加载方式和vue-cli打包出来的东西加载效果是差不多的,而且文件数量增加,文件体积变大,可能还更加慢,vue项目首屏出现白屏的根本原因是由于页面首屏内容也是动态去加载的,在请求的文档流中只有一个根节点,所以解析,加载需要过程,如果需要让你的vue项目首屏出现的时间变短,我建议使用 vue的服务端渲染,或者是预渲染prerender,资料看这里

回答:

第一条、第二条,不建议 这两个文件本身没有多大,加这两条又多两次http请求,也不见得有多大效果
第三条,同上,看这个第三方库的大小和和效用频次,

要加块首页加载,还是按需要加载最有效果,
分析 打包后的文件,看有什么什么第三方库,占用比较大,再考虑第三方CDN引入

回答:

index.html里面应该尽量避免引入任何的js库,因为vue一般来说是做单页面应用的,index.html引入的文件会一直在,无论你怎么切换

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注