解决方案:使用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. .Net配置Ajax跨域访问

    1.在web.config文件中的 system.webServer 节点下 增加如下配置 <httpProtocol> <customHeaders> <add nam ...

  2. RF之简介

    robot framework 是一个通用型的自动测试框架 - 自动测试用例的实现方式 - 自动测试用例的开发支持 :  IDE.库 - 和用例管理系统的集成 - 测试执行:相关测试套件和测试用例的执 ...

  3. 群晖NAS再再折腾

    问题 最近电信把我的公网地址收回去了,之前做好的网络端口映射失效了,在公司已经不能愉快地访问家里的网络.原先网络结构示意图如下: (直接访问方案网络结构图)   只需要对电信光猫(也是个路由器)和家用 ...

  4. HttpRunner学习3--extract提取数据和引用

    前言 在HttpRunner中,我们要想从当前 HTTP 请求的响应结果中提取参数,可以通过 extract 关键字来实现. 本人环境:HttpRunner V1.5.8 测试场景 在这里,我将以一个 ...

  5. C#DataTable转List<T>互转

    using System; using System.Collections.Generic; using System.Data; using System.Reflection; namespac ...

  6. C#中的Skip()和Take()

    Skip()和Take()方法都是IEnumerable<T> 接口的扩展方法,包括C#中的所有Collections类,如ArrayList,Queue,Stack等等,还有数组和字符串 ...

  7. Ubuntu 无法打开系统设置

    最近不知道咋搞得,导致系统设置打不开,可能是系统输入法的问题吧,运行以下命令: sudo apt-get install gnome-control-center

  8. 基于webpack实现多html页面开发框架七 引入第三方库如jquery

    一.解决什么问题 1.如何引入第三方库,如jquery等 二.引入jquery方法 1.下载jquery.min.js放到assets/lib下面 2.安装copy-webpack-plugin,将已 ...

  9. 推荐一款好看的Hexo主题Ayer

    介绍 Ayer 是一个干净且优雅的Hexo主题,自带响应式,加载速度很快,该有的功能都有,可配置项也很多,非常适合作为你的博客主题,主题内还附送了6张精美的高清壁纸.欢迎使用和Star支持,如果你在使 ...

  10. js-函数的三种创建方式

    1.声明式 function fn() { //do something } 2.函数表达式 let fn = function () { //do something } 3.构造函数 functi ...