关于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(#)式这种相对于第一种的话刷 ...
随机推荐
- Mybatis学习笔记11 - 动态sql之trim标签
trim标签体中是整个字符串拼串后的结果.prefix="" 前缀: prefix给拼串后的整个字符串加一个前缀prefixOverrides="" 前缀覆盖: ...
- 数据库mysql基础语言--各模式的含义
1. 欢迎信息 欢迎来到 MySQL 镜像.命令以 ; 或 g 结束.你的 MySQL 连接编号为 2.服务器版本:5.1.47-社区 MySQL 社区服务器(GPL) 版权(C)2000.2010, ...
- IIS/asp.net管道
http://referencesource.microsoft.com/ 理解ASP.NET的前提是对ASP.NET管道式设计的深刻认识.而ASP.NET Web应用大都是寄宿于IIS上的. IIS ...
- Kure讲HTML_HTML界面结构
1.HTML界面结构: 通常通过html开发的网页,它有一个自己固定的书写格式(类似于写信的时候也有固定的格式) <!-- DOCTYPE用来告诉浏览器用当前html文档是用html的哪个版本编 ...
- 《Flink 源码解析》—— 源码编译运行
更新一篇知识星球里面的源码分析文章,去年写的,周末自己录了个视频,大家看下效果好吗?如果好的话,后面补录发在知识星球里面的其他源码解析文章. 前言 之前自己本地 clone 了 Flink 的源码,编 ...
- Win2D 官方文章系列翻译 - 与 Direct2D 互操作
本文为个人博客备份文章,原文地址: http://validvoid.net/win2d-interop-with-direct2d/ Win2D 作为 Direct2D 的上层实现,支持与其进行双向 ...
- golang中并发的相关知识
golang中done channel理解:https://segmentfault.com/a/1190000006261218 golang并发模型之使用Context:https://segme ...
- Chrome浏览器正常,IE下界面却乱了
背景:项目实战中总会遇到一些小问题,IE特别多 Chrome浏览器页面正常,IE下界面就乱了 原因分析 1.首先想到的是代码有米有问题呢?主要指的是兼容性 2.兼容性没有问题,那我们打开IE的开发工具 ...
- spring-cloud构架微服务(1)-全局配置
使用spring-cloud是基于熟悉springboot基础上进行的.本篇介绍全局配置,spring-boot版本就以1.4.0来做吧.项目地址: https://git.oschina.net/b ...
- mysql5.1安装图解教程
mysql5.1安装图解教程 曾经为了要搭建模拟平台,从内地网站学习到台湾网站,其中必不可少的一项就是MySQL,那时候正好普遍用5.1,所以也很习惯用MySQL5.1版本! 下面就以MySQL5.1 ...