脚本宝典收集整理的这篇文章主要介绍了

为了vue-cli spa项目优化首屏所做的事情

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p>第一次写 vue spa项目,但是在实践的过程发现了很多坑,这篇文章主要讲述的是spa项目首屏加载过慢的大坑。<br />在webpack的配置中,在打包的过程中,会将所有的库都打包到vendor.js中,所以导致了vendor.js这包过大,而页面要想出现数据必须在vendor.js加载完成以后,所以后面所做的努力基本就是想办法把vendor.js的体积变小。</p> <h3 id="articleHeader0">1.externals</h3> <p>在webpack.base.conf.js这个文件中,module.<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a>s输出的对象里面加一个key 叫做 externals,配置如下</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//webpack.base.conf.js externals: { 'vue': '<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>',<br /> 'vue-router': '<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>Router',<br /> 'vuex': '<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>x',<br /> 'axios': 'axios',<br /> // 'vue-lazyload': 'VueLazyload',<br /> 'moment': 'moment',<br /> // 'element-ui': 'element-ui'<br /> }<br /> //index.html<br /> <script src=&quot;//cdn.bootcss.com/vue/2.2.5/vue.min.js&quot;></script><br /> <script src=&quot;//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js&quot;></script><br /> <script src=&quot;https://cdn.bootcss.com/axios/0.16.2/axios.min.js&quot;></script><br /> <!-- <script src=&quot;https://cdn.bootcss.com/axios/0.11.0/axios.min.js&quot;></script> --><br /> <!-- <script src=&quot;https://unpkg.com/vue-lazyload/vue-lazyload.js&quot;></script> --><br /> <script src=&quot;https://cdn.bootcss.com/moment.js/2.18.1/moment.js&quot;></script><br /> <script src=&quot;https://cdn.bootcss.com/element-ui/1.3.7/index.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-comment">//webpack.base.conf.js</span> externals: { <span class="hljs-string">'vue'</span>: <span class="hljs-string">'Vue'</span>, <span class="hljs-string">'vue-router'</span>: <span class="hljs-string">'VueRouter'</span>, <span class="hljs-string">'vuex'</span>: <span class="hljs-string">'Vuex'</span>, <span class="hljs-string">'axios'</span>: <span class="hljs-string">'axios'</span>, <span class="hljs-comment">// 'vue-lazyload': 'VueLazyload',</span> <span class="hljs-string">'moment'</span>: <span class="hljs-string">'moment'</span>, <span class="hljs-comment">// 'element-ui': 'element-ui'</span> } <span class="hljs-comment">//index.html</span> &lt;script src=<span class="hljs-string">"//cdn.bootcss.com/vue/2.2.5/vue.min.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> &lt;script src=<span class="hljs-string">"//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> &lt;script src=<span class="hljs-string">"https://cdn.bootcss.com/axios/0.16.2/axios.min.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> &lt;!-- <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/axios/0.11.0/axios.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> --&gt; <span class="xml"><span class="hljs-comment">&lt;!-- &lt;script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"&gt;&lt;/script&gt; --&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/moment.js/2.18.1/moment.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.bootcss.com/element-ui/1.3.7/index.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span></code></pre> <p>externals的左边是给 require用的 ,右边是给全局调用的。建议使用bootcdn,相对来说算是比较快的cdn了。<br />还有一种是dll打包,目前没有实践过,下次可以试试。</p> <h3 id="articleHeader1">2.开启gzip</h3> <p>后端用的是nginx,稍微配置即可开启gzip</p> <blockquote> <p>sudo nano /etc/nginx/nginx.conf<br />在Gzip Settings里加入:</p> </blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="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;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code><span class="hljs-attribute">gzip</span> <span class="hljs-literal">on</span>; <span class="hljs-attribute">gzip_min_length</span> <span class="hljs-number">1k</span>; <span class="hljs-attribute">gzip_buffers</span> <span class="hljs-number">4</span> <span class="hljs-number">16k</span>; <span class="hljs-attribute">gzip_comp_level</span> <span class="hljs-number">5</span>; <span class="hljs-attribute">gzip_types</span> text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;</code></pre> <p>开启了以后,js、css相关的代码可以压缩将近5倍的体积。</p> <h3 id="articleHeader2">3.开启路由懒加载</h3> <p>开启了以后不同的路由组件可以分成不同的代码,从而实现进入相应页面以后才加载相关代码。<br />在官方文档中有相关实现的代码,很简单。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//引入的时候改成懒加载的形式 const admin = resolve => require(['../views/admin.vue'], resolve);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">//引入的时候改成懒加载的形式</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> admin = <span class="hljs-function"><span class="hljs-params">resolve</span> =&gt;</span> <span class="hljs-built_in">require</span>([<span class="hljs-string">'../views/admin.vue'</span>], resolve);</code></pre> <h3 id="articleHeader3">4.bundleAnalyzerReport检测包的情况</h3> <p>在config/index.js中一个相关插件叫做bundleAnalyzerReport,上面有几行注释,讲的是只要在打包的时候输入npm run build --report,就可以在打包的同时查看每个打包生成的js,里面的库的构成情况,方便我们进行相关的删减,比如有的库太大了,是否可以自己实现,有的库是否有必要,可否删除之类。</p> <h3 id="articleHeader4">5.服务端加载</h3> <p>额,这个太难搞了,刚入行node.js只会npm这一点相关知识,以后有空要好好学学,听说通过nuxt.js是比较容易上手,还得以后慢慢实践。毕竟首屏加载,seo优化都得靠SSR(service side render)了。</p>

总结

以上是脚本宝典为你收集整理的

为了vue-cli spa项目优化首屏所做的事情

全部内容,希望文章能够帮你解决

为了vue-cli spa项目优化首屏所做的事情

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过