解决vue打包后vendor.js文件过大问题


Posted in Javascript onJuly 03, 2019

第一步、cdn引入各种包

index.html中cdn的方式引入vue、vuex、axios、element-ui、vue-router等包,如下图:

解决vue打包后vendor.js文件过大问题

第二步、在使用vue等包的地方,注释掉import引入

在所有使用vue的地方注释掉引入的vue等包,但是Vue.use(axios)、Vue.use(VueRoter)、Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上这句话,还是会打包element-ui到vendor.js文件中

在main.js

解决vue打包后vendor.js文件过大问题

在store文件加中的index.js

解决vue打包后vendor.js文件过大问题

在api/request.js文件中

解决vue打包后vendor.js文件过大问题

在router/index.js文件中

解决vue打包后vendor.js文件过大问题

第三步、打包忽视掉vue等包

在webpack.base.conf.js

解决vue打包后vendor.js文件过大问题

第四步、如果打包后的文件还是比较大,就采用路由懒加载的方式加载路由

解决vue打包后vendor.js文件过大问题

最终打包结果

vendor.js的大小由原来的988k, 降到235k

解决vue打包后vendor.js文件过大问题

总结

以上所述是小编给大家介绍的解决vue打包后vendor.js文件过大问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 #Javascript
vuex 动态注册方法 registerModule的实现
Jul 03 #Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 #Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 #jQuery
使用vue实现各类弹出框组件
Jul 03 #Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 #Javascript
使用微信SDK自定义分享的方法
Jul 03 #Javascript
You might like
PHP 选项及相关信息函数库
2006/12/04 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
php中动态修改ini配置
2014/10/14 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
vue 微信授权登录解决方案
2018/04/10 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
Python3.4实现从HTTP代理网站批量获取代理并筛选的方法示例
2017/09/26 Python
用Python解决x的n次方问题
2019/02/08 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
python解析xml简单示例
2019/06/21 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
浅谈Python3识别判断图片主要颜色并和颜色库进行对比的方法
2019/10/25 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
教育孩子心得体会
2014/01/01 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
社区文化建设方案
2014/05/02 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang