解决方案:使用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. 知识图谱推理与实践(3) -- jena自定义builtin

    在第2篇里,介绍了jena的The general purpose rule engine(通用规则引擎)及其使用,本篇继续探究,如何自定义builtin. builtin介绍 先回顾builtin为 ...

  2. js截取指定字符前面或后面的内容

    function getCaption(obj,state) { var index=obj.lastIndexOf("\-"); if(state==0){ obj=obj.su ...

  3. 【MySQL】LIMIT以及LIMIT OFFSET

    LIMIT两种方法: 两种方法: ()LIMIT A; #表示从第一条记录开始取A条记录: ()LIMIT A,B; #参数A为可选参数,表示跳过A条数据(默认为0) #参数B为必选参数,表示取B行数 ...

  4. NGUI 源码分析- AnchorPoint

    AnchorPoint 是 UIRect 的一个内部类,此处规定作为基准的那个对象称为锚点对象,基准对象对应的矩形框称为目标框,当前对象对应的矩形框称为源框. public class AnchorP ...

  5. Pikachu-CSRF(跨站请求伪造)

    Pikachu-CSRF(跨站请求伪造) CSRF(跨站请求伪造)概述 Cross-site request forgery 简称为“CSRF”,在CSRF的攻击场景中攻击者会伪造一个请求(这个请求一 ...

  6. MyBatis结果集一对多映射

    MyBatis结果集一对多映射 需求:重画二维码配置类,根据sizeCode将查询出来的imageCode分组. DROP TABLE IF EXISTS `size_code`; CREATE TA ...

  7. 破解另一家网站的反爬机制 & HMAC 算法

    零.写在前面 本文涉及的反爬技术,仅供个人技术学习,禁止并做到: 干扰被访问网站的正常运行 抓取受到法律保护的特定类型的数据或信息 搜集到的数据禁止传播.交给第三方使用.或者牟利 如有可能,在爬到数据 ...

  8. 东芝半导体最新ARM开发板——TT_M3HQ开箱评测

    前言 最近从面包板社区申请到一块东芝最新ARM Cortex-M3内核的开发板--TT_M3HQ,其实开发板收到好几天了,这几天一直在构思怎么来写这第一篇评测文章,看大家在社区也都发了第一篇评测,我也 ...

  9. python高阶函数——sorted排序算法

    python 内置的sorted()函数可以对一个list进行排序: >>> sorted([8,3,8,11,-2]) [-2, 3, 8, 8, 11] 既然说是高阶函数,那么它 ...

  10. C#使用Linq to csv读取.csv文件数据

    前言:今日遇到了一个需要读取CSV文件类型的EXCEL文档数据的问题,原本使用NPOI的解决方案直接读取文档数据,最后失败了,主要是文件的类型版本等信息不兼容导致.其他同事有使用linq to csv ...