单页面应用的一个问题就是首页加载东西过多,加载时间过长。特别在移动端,单页面应用的首屏加载优化更是绕不开的话题。下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步。
我的项目vue-cli3构建的,vue + vue-router + vuex, UI框架选用element-ui, ajax方案选用axios,服务器使用Nginx。用到的这些技术都是现在用的比较广泛的,看到这篇文章,我估计你和我用的技术应该差不多。
首页我们来看看没有经过任何优化的打包分析,vue-cli3的项目直接<强> vue-cli-service构建——报告强就会生成一个报告。html,打开这个html就能看的到,不是vue-cli3的项目需要自行安装这个插件,参考链接,点击。
如上图所示在供应商比较大的文件有元素,时刻,echart,还有jquery,然后还有一些没见过的vue-qriously这些组件,接下来我们来一步一步让供应商变小
<强> 1。仔细考虑组件是否需要全局引入
在我们的main.js,我发现有很多组件被全局引入,其中有些组件只有1、2个页面用的到,这些组件不需要全部引入
从“共同进口ImageComponent/ImageComponent '
从“共同进口InfiniteLoading/InfiniteLoading '
从“共同进口SearchDialog/SearchDialog '
从“共同进口BasicTable/BasicTable '
从“vue-qriously”进口VueQriously
Vue.use (ImageComponent)
Vue.use (InfiniteLoading)//可以去除
Vue.use (SearchDialog)//可以去除
Vue.use (BasicTable)//可以去除
Vue.use (VueQriously)//可以去除
上面一段代码是我们main.js中的代码,其中ImageComponent是用来处理图片的,用到的页面很多,其他的组件都只要较少的页面用的到,我们在main.js中删除,移到具体的页面中去。
<强> 2只手动引入ECharts各模块
默认引入ECharts是引入全部的‘‘导入* ECharts从“ECharts ' ' ' '我们只需要部分组件,只需引入自己需要的部分。参考地址,点击
从“vue-echarts/组件/导入VueECharts ECharts.vue”
导入“echarts/lib/图表/线”
导入“echarts/lib/图表/酒吧”
导入“echarts/lib/图表/派”
导入“echarts/lib/组件/标题”
导入“echarts/lib/组件/工具提示”
导入“echarts/lib/组件/传奇”
导入“echarts/lib/组件/markPoint”
<强> 3。使用更轻量级的工具库
时刻是处理时间的标杆,但是它过于庞大且默认不支持tree-shaking,而且我们的项目中只用到了(),()的格式,添加(),减去()等几个非常简单的方法,有点大材小用,所以我们用date-fns来替换它,需要什么方法直接引入就行。
经过上面的三步初步优化,我们可以看到vendor.js变小了很多,去除了一刻,我们项目之前echart就是按需加载的。
进过上面的优化,发现Vue全家桶以及ElementUI仍然占了很大一部分供应商体积,这部分代码是不变的,但会随着每次供应商打包改变散列重新加载。我们可以使用CDN剔除这部分不经常变化的公共库。我们将<强> Vue, vue-router, vuex, axios, jquery,强调强,使用CDN资源引入。国内的CDN服务推荐使用BootCDN
<强> 1。首先我们在index . html中,添加CDN代码
…
& lt;链接的href=" https://cdn.bootcss.com/element-ui/2.7.2/theme-chalk/index.css " rel=把奖怼北?
& lt;/head>
& lt; body>
& lt; div id="应用"祝辞& lt;/div>
& lt;脚本src=" https://cdn.bootcss.com/vue/2.6.10/vue.min.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/vue-router/3.0.4/vue-router.min.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/axios/0.18.0/axios.min.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/element-ui/2.7.2/index.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/underscore.js/1.9.1/underscore-min.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
