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

vue-cli项目优化,缩短首屏加载时间

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>主要是首屏加载太慢。</p> <p>大文件定位<br />我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解决过大的js文件。 <br />安装</p> <p>npm install --save-dev webpack-bundle-analyzer</p> <p>在webpack中设置如下,然后npm run dev 的时候默认会在8888端口显示。</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 BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> BundleAnalyzerPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webpack-bundle-analyzer'</span>).BundleAnalyzerPlugin; <span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { <span class="hljs-attr">plugins</span>: [ <span class="hljs-keyword">new</span> BundleAnalyzerPlugin() ] }</code></pre> <p>JS文件按需加载<br />如果没有这个设置,项目首屏加载时会加载整个网站所有的JS文件,所以将JS文件拆开,点击某个页面时再加载该页面的JS是一个很好的优化方法。 <br />这里用到的就是vue的组件懒加载。在router.js中,不要使用import的方法引入组件,使用require.ensure。</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="import index from '@/components/index' const index = r => require.ensure( [], () => r (require('@/components/index'),'index'))<br /> //如果写了第二个参数,就打包到该`/JS/index` 的文件中。<br /> //不写第二个参数,就直接打包在`/JS` 目录下。<br /> const index = r => require.ensure( [], () => r (require('@/components/index')))" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> index <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/index'</span> <span class="hljs-keyword">const</span> index = <span class="hljs-function"><span class="hljs-params">r</span> =&gt;</span> <span class="hljs-built_in">require</span>.ensure( [], () =&gt; r (<span class="hljs-built_in">require</span>(<span class="hljs-string">'@/components/index'</span>),<span class="hljs-string">'index'</span>)) <span class="hljs-comment">//如果写了第二个参数,就打包到该`/JS/index` 的文件中。</span> <span class="hljs-comment">//不写第二个参数,就直接打包在`/JS` 目录下。</span> <span class="hljs-keyword">const</span> index = <span class="hljs-function"><span class="hljs-params">r</span> =&gt;</span> <span class="hljs-built_in">require</span>.ensure( [], () =&gt; r (<span class="hljs-built_in">require</span>(<span class="hljs-string">'@/components/index'</span>)))</code></pre> <p>使用cdn<br />打包时,把vue、vuex、vue-router、ax<a href="http://www.js-code.com/tag/ios" title="ios" target="_blank">ios</a>等,换用国内的bootcdn 直接引入到根目录的index.html中。</p> <p>在webpack设置中添加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="externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios' } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">externals: { <span class="hljs-string">'vue'</span>: <span class="hljs-string">'<a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>'</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">'ax<a href="http://www.js-code.com/tag/ios" title="浏览关于“ios”的文章" target="_blank" class="tag_link">ios</a>'</span>: <span class="hljs-string">'axios'</span> } </code></pre> <p>在index.html中使用cdn引入。</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="<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;//cdn.bootcss.com/vuex/2.2.1/vuex.min.js&quot;></script><br /> <script src=&quot;//cdn.bootcss.com/axios/0.15.3/axios.min.js&quot;></script> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript">&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">"//cdn.bootcss.com/vuex/2.2.1/vuex.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/axios/0.15.3/axios.min.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span> </code></pre> <p>将JS文件放在body的最后<br />默认情况下,build后的index.html中,js的引入是在header中。 <br />使用html-webpack-plugin插件,将inject的值改成body。就可以将js引入放到body最后。</p> <p>var HtmlWebpackPlugin = require('html-webpack-plugin');<br />new HtmlWebpackPlugin({</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=" inject: 'body'," title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code style="word-break: break-word; white-space: initial;"> inject: <span class="hljs-symbol">'bod</span>y',</code></pre> <p>})</p> <p>压缩代码并移除console<br />使用UglifyJsPlugin 插件来压缩代码和移除console。</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="new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: true, pure_funcs: ['console.log'] }, sourceMap: false }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">new</span> webpack.optimize.UglifyJsPlugin({ <span class="hljs-attr">compress</span>: { <span class="hljs-attr">warnings</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">drop_console</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">pure_funcs</span>: [<span class="hljs-string">'console.log'</span>] }, <span class="hljs-attr">source<a href="http://www.js-code.com/tag/map" title="浏览关于“Map”的文章" target="_blank" class="tag_link">Map</a></span>: <span class="hljs-literal">false</span> }) </code></pre> <p><a href="https://blog.csdn.net/buppt/article/details/79131972" rel="nofollow noreferrer" target="_blank">参考文章</a></p> <p></code></p>

总结

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

vue-cli项目优化,缩短首屏加载时间

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

vue-cli项目优化,缩短首屏加载时间

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

80%的人都看过