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


Posted in Javascript onSeptember 27, 2018

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

处理这种文件的

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

<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
 <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
 <script src="https://unpkg.com/mint-ui@2.2.13/lib/index.js"></script>
 <script src="https://unpkg.com/element-ui@2.3.9/lib/index.js"></script>
 <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>

然后找到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文件过大的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
js星星评分效果
Jul 24 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
js消除图片小游戏代码
Dec 11 Javascript
es6中new.target的作用和使用场景简单示例分析
Mar 14 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 #Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 #Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 #Javascript
vue-cli的工程模板与构建工具详解
Sep 27 #Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 #Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 #Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 #Javascript
You might like
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
JavaScript 指导方针
2007/04/05 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
jQuery插件zTree实现删除树子节点的方法示例
2017/03/08 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
python time模块用法实例详解
2014/09/11 Python
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
Python中使用HTMLParser解析html实例
2015/02/08 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
单链表反转python实现代码示例
2018/02/08 Python
python基础教程项目三之万能的XML
2018/04/02 Python
使用Python设计一个代码统计工具
2018/04/04 Python
Python subprocess模块常见用法分析
2018/06/12 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
python爬虫可以爬什么
2020/06/16 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
酒吧总经理岗位职责
2013/12/10 职场文书
体育教师自荐信范文
2013/12/16 职场文书
白酒市场开发计划书
2014/01/09 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
2016年国陪研修感言
2015/11/18 职场文书