解决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 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
js中for in的用法示例解析
Dec 25 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 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中simplexml_load_string函数使用说明
2011/01/01 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
JQuery动画和停止动画实例代码
2013/03/01 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
python多重继承实例
2014/10/11 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
python实现多线程的两种方式
2016/05/22 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python中time库的实例使用方法
2019/10/31 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
Viking比利时:购买办公用品
2019/10/30 全球购物
数学专业毕业生自荐信
2013/11/10 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
测试工程师职业规划书
2014/02/06 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
教师先进事迹材料
2014/12/16 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
2015学校年度工作总结
2015/05/11 职场文书
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server