关于webpack打包vue后vendor包过大的问题
2024-09-05 14:20:06
因为项目用到了elementUI,打包之后包括vue、axios、elementui之类的加起来有500kb,页面第一次打开会出现一阵白屏显示。在百度过后发现可以使用外链接而不用模块包。
博主使用的外链接包含vue、axios、elementUI。
第一步是找到对应的版本,在package-lock.json找到固定的版本号
第二步是在 https://www.bootcdn.cn/ 找到对应的版本链接
比如axios的对应 https://www.bootcdn.cn/axios/ 网址。
第三步写在index.html里面,script标签vue的引入一定要在其他之前,例如elementui需要引入vue,如果在引入elementui之后就会报错,因为没有找到vue
第四步在webpack.base.conf.js与entry相同的级别
externals: {
'vue': 'Vue',
'axios': 'axios',
'element-ui': 'ELEMENT'
}
第五步在main.js包括各个地方引用Vue/axios中 import Vue from 'vue'; import axios from 'axios';注释掉
第六步打包完成
然后原本从500kb的包就变成了400b左右
以上如果有错误的地方欢迎指出。谢谢
最新文章
- 从零开始使用Jenkins来构建Docker容器(Ubuntu 14.04)
- 去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景
- monkey测试
- Javascript的逻辑判断和循环的知识点
- Mybatis 批量insert
- Linux常用指令---系统负载
- class_create()
- shell脚本分为三类:登录脚本、交互式脚本、非交互式脚本
- HDOJ-ACM1425 sort 简单hash应用
- action找不到
- PyconChina2015丁来强Pydata Ecosystem
- JDK中日期和时间的几个常用类浅析(五)
- Access SQL实现连续及不连续Rank排名
- win10 uwp 弹起键盘不隐藏界面元素
- 漫谈程序员(十八)windows中的命令subst
- 如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕(自适应大小)
- [翻译]一个新式的基于文本的浏览器 Browsh
- mysql 备份 恢复
- 进程池 和 multiprocessing.Pool模块
- 使用R语言-计算均值,方差等