热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

今天小编就为大家分享一篇解决vue-cli脚手架打包后vendor文件过大的问题。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

处理这种文件的

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

 
 
 
 
 

然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代码

 externals:{
 'vue':'Vue',
 'element-ui':'ELEMENT',
 'mint-ui':'MINT',
 'axios':'axios',
 'vue-router':'VueRouter',
 }, 

2、通过路由的懒加载

export default new VueRouter({//这个为什么用VueRouter 是通过script标签引入的
 mode: 'history',
 routes: [
 {
  path: '/',
  redirect: '/master/closestore/today'
 },

 {
  path: '/master/closestore/today',
  name: 'CloseingCount',
   component: resolve => require(['@/components/ClosingCount'], resolve)
 },
 ]});

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


推荐阅读
author-avatar
良良8003
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有