解决方案:使用externals引用第三方资源,防止element资源被打包到自己项目中,(总共修改3个页面index.html、webpack.base.conf.js、main.js)

1、修改index.html页面,再head中引入cdn。

2.修改webpack.base.conf.js文件.添加externals配置

externals: {
vue: 'Vue',
element: 'ElementUI',
},

3.删除main.js中的相应import from。因为如果不删除,打包的时候还会把这两个文件打进去

因为项目是后面越做越大,发现elementUI打包在一起太大,就想将elementUI以CDN的方式引入,但是我只将elementUI使用CDN引入会报找不到ElementUI,

尝试了很多遍,发现这种将elementUI的CDN用法,同时也需要vue也是CDN引入,否则总是报错,找不到element;

vue-cli 引用elementUI打包后文件过大的更多相关文章

  1. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  2. vue中使用videojs打包后体积过大优化

    videojs 是一个非常好的js库,可以支持各种格式的视频播放,也能做直播流.官网地址 https://videojs.com/ 在vue项目中也可以使用 vue-video-player ,更好的 ...

  3. vue单页面应用打包后相对路径、绝对路径相关问题

    原文链接:  vue单页面应用打包后相对路径.绝对路径相关问题展开       在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过web ...

  4. 打包phar文件过大的问题。

    根据一个开源工具得到的灵感,使用流打包,并使用token_get_all移除了所用PHP文件的空白.现在打包出来只有93k了.谢谢关注. 我一个简单的文件,加上一个symfony的process包,打 ...

  5. webpack减少打包后文件体积的几种方法

    webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...

  6. vue css背景图片打包后路径问题

    limit,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录 name,后面是打包后的路径: loader,后面 limit 字段代表图片打包限制,这个限制并不是说 ...

  7. Vue项目用webpack打包后,预览时资源路径出错(文末有vue项目链接分享)

    最近用vue写了一些项目,项目写完之后需要打包之后才能放到网上展示,所以在这里记录一下项目打包的过程以及遇到的一些问题. --------------------------------------- ...

  8. 记录下自己VUE项目用Hbuider打包后启动白屏问题

    刚用VUE做项目,之前测试时vue创建的自身项目打包都是启动OK没问题.今天打包自己的时,启动一直白屏.折磨了好久,百度了一堆.终于找到了方法. 首先是在config/index.js里面 build ...

  9. .2-浅析webpack源码之打包后文件

    先不进源码,分析一下打包后的文件,来一张图: 首先创建两个JS文件,内容如下: // config.js module.exports = { entry: './input.js', output: ...

随机推荐

  1. python网络编程socketserver模块(实现TCP客户端/服务器)

    摘录python核心编程 socketserver(python3.x版本重新命名)是标准库中的网络编程的高级模块.通过将创建网络客户端和服务器所必须的代码封装起来,简化了模板,为你提供了各种各样的类 ...

  2. Dynamics 365 Portal 多语言

    Dynamics 365 Portal 的多语言分两种情况: 1.通过定义两套记录来实现,如Web Link Set.Snippet Content,都是定义两套记录,分别关联不同的语言来实现 Web ...

  3. 15. Go 语言“避坑”与技巧

    Go 语言"避坑"与技巧 任何编程语言都不是完美的,Go 语言也是如此.Go 语言的某些特性在使用时如果不注意,也会造成一些错误,我们习惯上将这些造成错误的设计称为"坑& ...

  4. VS2019 开发Django(三)------连接MySQL

    导航:VS2019开发Django系列 下班回到家,洗漱完毕,夜已深.关于Django这个系列的博文,我心中的想法就是承接之前的微信小程序的内容,做一个服务端的管理中心,上新菜单,调整价格啊!之类的, ...

  5. 老版本nginx存在安全漏洞,不停服务热升级

    1.场景描述 安全部通知:nginx存在"整数溢出漏洞",经测试2017年4月21日之后的版本无问题,将openresty升级到最新版本,Nginx升级到1.13.2之后的版本. ...

  6. Linux’s init system & systemd

    一.init system 1.计算机是如何启动的 以早期 Fedora 系统为例. 1.开机 2.BIOS 和 GRUB(引导加载程序) 3.Linux 内核启动后,init 进程 是在 Fedor ...

  7. 从源码角度看 PHP 字符串类型转换

    PHP 的类型转换是比较方便的,但是越是容易使用的东西,底层的实现越是复杂,而且在使用中像我这样的新手也往往不清楚转换后的结果到底是什么.有时候,对于 Java 这种强类型的语言,使用的时候需要强制进 ...

  8. css实现内容不相同的左右两个div等高

    问题提出 现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢? 下面是网上找的3种实现方法,觉得很有代表性,所以索性收藏起来. 方法一 通过父元 ...

  9. 使用redisson时关于订阅数的问题

    在使用redisson消息订阅时,我针对门店商品库存减扣进行订阅的操作(在这里一个商品一个监听队列),当正式投入生产时,发现一直再报Subscribe timeout: (" + timeo ...

  10. 挑选(pick)

    挑选(pick) 1s/128MB [题目背景] NOIP2017 马上就要到了,丁爷爷想要从他的小朋友里挑选出一些厉害的来参加NOIP.  [题目描述] 丁爷爷共有 n 个小朋友,按编号 1 . . ...