问题

单页应用的一个问题是第一页加载的东西太多，加载时间太长。尤其是在移动端，单页应用首屏加载的优化是不可回避的话题。下面我就写一些我在项目中做的优化，希望大家互相讨论，共同进步。

我的项目vue-cli3是vue vue-router vuex打造的。UI框架是element-ui，ajax方案是axios，服务器是Nginx。这些技术现在被广泛使用。看完这篇文章，我估计你我应该用类似的技术。

第一步：网络包-包-分析器分析

让我们看看没有任何优化的包分析。vue-cli3项目将直接从VUE-vue-CLI-服务构建报告生成report.html。打开这个html，可以看到不是vue-cli3的项目需要安装这个插件。请参考链接并点击。

如上图所示，有element、moment、echart、jquery和一些以前从未见过的组件。接下来，让我们逐步缩小供应商

第二步：初步优化

1.仔细考虑组件是否需要全球引入

在我们的main.js中，我发现全球已经引入了很多组件，其中一些只被1、2页使用，这些组件不需要完全引入

从' COMMON/imageComponent '导入ImageComponent从' COMMON/infiniteLoading '导入搜索对话框从' COMMON/SearchDialog '导入基本可从' COMMON/基本可从' vue-qworly '导入Vue.use(ImageComponent)vue . use(InfiniteLoading)//您可以删除Vue.use(SearchDialog) //删除vue . use(基本可删除)//删除vue . use(vuequriously)//删除上面的代码，这是我们main.js中的代码，其中image

2.手动引入电子艺界的每个模块

默认引入e-charts，就是把所有` ` import *作为e-charts从‘e-charts’` `导入，我们只需要一些组件，只需要导入我们需要的部分。参考地址，点击

从' vue-echart/components/echart . vue ' import ' echart/lib/chart/line ' import ' echart/lib/chart/bar ' import ' echart/lib/chart/Pie ' import ' e charts/lib/component/title ' import ' e charts/lib/component/tooltip ' import ' e charts/lib/component/legend ' import ' e charts/lib/component/markpoint ' 3导入VueECharts。使用较轻的工具库

矩是处理时间的基准，但是太大了，默认不支持摇树。而且在我们的项目中，只使用了moment()，format()，add()，减法()等几个非常简单的方法，这是大材小用，所以我们用date-fns来代替，这样就可以直接介绍了。

经过以上三步的初步优化，我们可以看到vendor.js小了很多，矩也去掉了。在我们的项目之前，echart是按需加载的。

第三步：CDN优化

经过上面的优化，发现Vue家族的bucket和ElementUI仍然占据了厂商体量的很大一部分，这部分代码没有变化，但是每次厂商打包的时候都会随着hash的变化重新加载。我们可以使用CDN来消除公共库中不经常变化的这一部分。我们介绍vue，vue-router，vuex，axios，jquery，下划线，使用CDN资源。国内CDN服务推荐使用BootCDN

1.首先，我们在index.html添加了CDN代码

.link href=' https://cdn . bootcss.com/element-ui/2 . 7 . 2/theme-chake/index . CSS ' rel='样式表'/头体div id='app'/div脚本src=' http :3359 cdn . bootcss.com/vue/2 . 6 . 10/vue . min . js '/脚本脚本src=' http 33603359 cdn . bootcss.com/vuex在vue.config.js中添加webpack配置

configurewebpack k : { external s : { ' Vue ' : ' Vue '，' vue-router': 'VueRouter '，' vuex': 'Vuex '，' element-ui': 'ELEMENT '，' axios': 'axios '，'下划线' : { commonjs: '下划线'，amd: '下划线'，' root: '_' }，Jquery ' :删除vue .使用相关代码

需要注意的是，随着CDN的引入，VueRouter Vuex ElementUI的写法应该会有所改变。CDN会将它们安装在窗户上，因此不再使用Vue.use(xxx)

不需要从‘vue’导入vue，从‘vue-router’导入vuerouter等。

不包括全家桶、Element-ui等。只有剩下的需要第一次加载厂商。

使用CDN的好处如下

(1)加快装箱速度。分离公共库后，每次重新打包都不会将它们打包到供应商文件中。

(2)CDN可以减轻自身服务器的访问压力，实现资源的并行下载。浏览器并行加载src资源(执行有序)。

第四步：检查Nginx是否打开gzip

如下图所示，打开gzip的js大小比没有打开gzip的js小2/3左右，所以如果没有打开gzip，意义不大。如何查看你的项目是否打开了gzip，如下图所示，gzip是打开的，gzip会显示在浏览器控制台的Content-Encoding列，否则不会。如果Nginx开启gzip，请自行搜索，或者呼叫服务器开启。

第五步：检查路线延迟装载

如果不按需加载路由组件，会将所有组件一次性打包到app.js中，导致第一次加载的内容过多，vue官方文档中也有提及。

{ name: 'vipBoxActivity '，path:'vipBoxActivity '，component(resolve){ require([' COMPONENTs/Vipbox/Vipbox activity/main . vue ']，resolve) }，{path: '买家摘要'，name: '买家摘要'，component 3360()=import(' view/买家/买家摘要/index ')，}，以上两种引入组件的方法都是正确的，可以实现路由的惰性加载。

最后的

最后，我们可以发现vendor.js的大小减少了很多。在我们的项目中，我们没有做第一步到第三步，但是我们做了第四步和第五步。如果你不做，你必须注意。最后，希望这篇文字能帮到你一点点，也希望你多多支持我们。