关于webpack打包vue后vendor包过大的问题
因为项目用到了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左右
以上如果有错误的地方欢迎指出。谢谢
关于webpack打包vue后vendor包过大的问题的更多相关文章
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- webpack打包vue文件报错,但是cnpm run dev正常,最后我只想说:是我太笨,还是webpack4.4版本太坑
最近做一个项目,需要使用webpack打包 .vue 文件的单页面应用,调试都正常,使用cnpm run dev 都可以,就是webpack打包时报错.如下: ERROR in ./src/App.v ...
- webpack打包vue项目之后生成的dist文件该怎么启动运行
亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run b ...
- 使用webpack打包vue工程
记得去年十月份的时候,自己在研究webpack,当时只是知道大致的用法,写了一个简单的demo,现在,经过了7个月对公司产品架构的使用,以及对vue-cli的使用,在了解了实际应用中各种需求之后,我自 ...
- 【原】使用webpack打包的后,公共请求路径的配置问题
在我们公司,和后台接接口时,公共的请求路径我们是单独抽出来的,放在一个独立的public.js中,在public.js中存入那个公共变量 公共变量是这样 在其他地方使用ajax时,我们就这样使用 这种 ...
- Webpack打包css后z-index被重新计算的解决方法
发现问题 最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致. 如下图,左侧是源文件,右侧是打包后的文件: 即使加上 ! ...
- 如何做到在webpack打包vue项目后,在外部动态修改配置文件
在我们做完vue项目后,只需要执行 npm run dist 就可以轻松进行打包转测试,可是如果我们临时需要修改一些配置文件比如域名,这时候我们就有点懵逼了,那就修改了再重新打一次包? NO NO N ...
- 16.如何做到webpack打包vue项目后,可以修改配置文件
问题描述: 前端需要修改restful API的url,但是打包之后,配置文件找不到了,如果在npm run build 生成dist后,这个配置也被写死了,传到运行的前端服务器上后,假设某次,api ...
- 解决webpack打包vue项目后,部署完成后,刷新页面页面404
1.url不动式url完全不动,即你的页面怎么改变,怎么跳转url都不会改变.这种情况的原理 就是纯ajax拿到页面后替换原页面中的元素,刷新页面就是首页 2.带hash(#)式这种相对于第一种的话刷 ...
随机推荐
- 宋宝华: 关于Linux进程优先级数字混乱的彻底澄清
宋宝华: 关于Linux进程优先级数字混乱的彻底澄清 原创: 宋宝华 Linux阅码场 9月20日 https://mp.weixin.qq.com/s/44Gamu17Vkl77OGV2KkRmQ ...
- 理解 Linux backlog/somaxconn 内核参数
https://jaminzhang.github.io/linux/understand-Linux-backlog-and-somaxconn-kernel-arguments/ 各参数的含义:h ...
- 错误 chamfermatching.cpp:969:30: error: the compiler can assume that the address of ‘annotate_img’
修改 ./build/modules/contrib/CMakeFiles/opencv_contrib.dir/flags.make文件,删掉-Werror=address,然后重新make
- (转)AIX修改系统时区的3种方法和AIX 时间问题(夏令时)
原文:http://blog.csdn.net/fuwencaho/article/details/28267283 http://www.wo81.com/tec/os/aix/2014-04-30 ...
- 微信web开发者工具 && 微信调试页面
微信开发者工具 做微信公众号的过程中,自然避免不了登录账号然后进行调试,但是在chrome上我们没有办法登录,这是一个令人头疼的问题,比如这个公众号网页,只会提示出错,因为开发者限制了公众号网页的登录 ...
- 使用mongoosejs链接Mongodb
以前只是了解Nodejs 这回打算好好学学.学到熟练使用的程度 var options={ user:'test_user', pass:'123456' }; mongoose.connect('m ...
- 【密码学】CSP的概念
CSP加密服务提供者(Cryptographic Service Provider)具有一下几个特点: CSP是真正执行密码运算的独立模块 物理上一个CSP由两部分组成:一个动态连接库,一个签名文件 ...
- Mac 安装GTK
Mac上配置GTK环境 安装command line工具, 如果安装了Xcode, 就直接跳过该步骤 安装Homebrew 使用brew install pkg-config 使用brew insta ...
- NET平台4.0 发布网站流程及出错总结
1.进入IIS设置,在控制面板中选择“管理工具”,进入后选择 “Internet 信息服务(IIS)管理器” 2.点击[添加]应用程序池,根据版本选择framework 3.添加网站 ,右击网站,添加 ...
- Oracle 求昨天 上个月 去年 日期
到公司发现有一个报表没有收到,查看后发现原来是Oracle数据源异常. ' day, 'yyyyMMdd') AS enddata FROM DUAL; 上面这个sql求上个月今天和昨天.一般情况下不 ...