解决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 相关文章推荐
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
Vue 技巧之控制父类的 slot
Feb 24 Javascript
js实现省级联动(数据结构优化)
Jul 17 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删除数组中的特定元素的代码
2012/06/28 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
Javascript缓存API
2016/06/14 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
解决Shell执行python文件,传参空格引起的问题
2018/10/30 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
python实现马丁策略的实例详解
2021/01/15 Python
英国Zoro工具:手动工具,电动工具和个人防护用品
2016/11/02 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
仓管员岗位职责范文
2013/11/08 职场文书
清洁工表扬信
2014/01/08 职场文书
集体婚礼策划方案
2014/02/22 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
授权委托书
2014/07/31 职场文书
2014年民政工作总结
2014/11/26 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
Win11如何修改dns?Win11修改dns图文教程
2022/01/18 数码科技