解决vue-cli脚手架打包后供应商文件过大的问题

  

大家会遇到打包后文件很大,导致页面初始化加载的速度很慢。会出现白屏的现象。这一般是你打包的供应商太大的缘故。如果你打包后看到你的供应商文件有700 kb以上。你就要考虑怎么处理。

  

  

<强> 1,把不常改变的库放到index . html中,通过cdn引入,比如下面这样:

        & lt;脚本src=" https://unpkg.com/vue@2.5.2/dist/vue.js”祝辞& lt;/script>   & lt;脚本src=" https://unpkg.com/vue-router@3.0.1/dist/vue-router.js”祝辞& lt;/script>   & lt;脚本src=" https://unpkg.com/mint-ui@2.2.13/lib/index.js”祝辞& lt;/script>   & lt;脚本src=" https://unpkg.com/element-ui@2.3.9/lib/index.js”祝辞& lt;/script>   & lt;脚本src=" https://unpkg.com/axios@0.18.0/dist/axios.min.js”祝辞& lt;/script>      

然后找到构建/webpack.base.conf。js文件,在模块。出口={}中添加以下代码

        外部:{   “vue”:“vue”,   “element-ui”:“元素”,   “mint-ui”:“薄荷”,   “axios”:“axios”,   “vue-router”:“VueRouter”,   },      

<强> 2,通过路由的懒加载

        出口默认新VueRouter({//这个为什么用VueRouter是通过脚本标签引入的   模式:“历史”,   路线:[   {   路径:“/?   重定向:“今天/主/closestore/?   },      {   路径:/主/closestore/今天,   名称:“CloseingCount”,   组件:解决=比;要求([' @/组件/ClosingCount '],解决)   },   ]});   之前      

以上这篇解决vue-cli脚手架打包后供应商文件过大的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

解决vue-cli脚手架打包后供应商文件过大的问题