现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echarts'
然后编译的时候加上了Uglify选项,发现vendor文件的大小已经达到了800多k,导致首次加载速度比较慢,然后我们这个是webapp,就更慢了。
所以考虑把echarts提取出来,改用cdn版本的echarts,具体操作步骤如下:

(0)找到可用的echartscdn资源
        在bootcdn上有echarts相关的cdn链接: http://www.bootcdn.cn/echarts/  ,这里主要分了common, simple和标准的三个版本,关于各个版本的内容和区别,可用参考echarts官网上的介绍:http://echarts.baidu.com/download.html 

(1)在html中引入echarts
        这里我们选择simple版本的,在html中添加script标签如下:
        <script src="//cdn.bootcss.com/echarts/3.2.2/echarts.simple.min.js"></script>

(2)在webpack中配置echarts
    在webpack.base.conf.js文件内添加external选项,在module.exports内部,和entry平级;
externals: {
   "echarts": "echarts"
 }, 
        externals中的key是给import的时候用的,value表示的是如何在global中访问到该对象,这里是window.echarts
        
(3)在vue文件中使用
        在vue中使用echarts的时候不再需要importecharts了,可以直接使用。

      this._vue_charts = echarts.init(document.getElementById('myChart'));
      this._vue_charts.setOption(this.options);


Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?的更多相关文章

  1. 从零开始搭建一个简单的基于webpack的vue开发环境

    原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...

  2. 1 使用webpack搭建vue开发环境

    1 先去node.js官网下载nodejs并且安装 安装成功之后在命令行输入node -v 回车,npm -v回车如果显示对应的版本号,说明node安装成功,自带的npm也安装成功 2 在d盘下创建一 ...

  3. 初探webpack之从零搭建Vue开发环境

    初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...

  4. webpack项目在开发环境中使用静态css文件

    webpack项目在开发环境中使用静态css文件 在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法 ...

  5. Webpack中的sourcemap以及如何在生产和开发环境中合理的设置

    一 . 从Sourcemap和Data URL说起 (1)什么是Sourcemap? 我们在打包中,将开发环境中源代码经过压缩,去空格,babel编译转化,最终可以得到适用于生产环境的项目代码,这样处 ...

  6. 【原创】windows下搭建vue开发环境+IIS部署

    [原创]win10下搭建vue开发环境  如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图:     详细的安 ...

  7. vue开发环境搭建及热更新

    写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...

  8. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  9. vue开发环境搭建Mac版

    一.前言 要做一个移动端app,面对webapp最流行的三个技术React,angular,vue,三选一,如何选,可参考blog移动app技术选型,react,angular, vue, 下面是对  ...

随机推荐

  1. 项目管理之道--纪我的新书《PMP项目管理认证学习指南(第4版)》出版并预祝大卖!

    新年伊始,我最新的项目管理书籍——<PMP项目管理认证学习指南(第4版)>也出版了,真是新年新气象啊!翻译英文书籍是一件任重道远的工作,除了要具备扎实的基本功,熟悉相关的领域外,还需要细致 ...

  2. AEAI DP按钮权限配置说明

    1 背景概述 AEAI DP3.5版本以后支持对按钮权限进行灵活的管理配置,本文对配置过程进行详细说明,为相关使用人员提供指导和参考. 2 预期读者 数通畅联技术人员 AEAI DP开发平台使用人员 ...

  3. 什么是Java实例初始化块

    在本篇文章,我将会使用一个例子展示什么是实例变量初始化块,实例初始化块和静态初始化块,然后说明在Java中实例初始化块是如何工作的. 执行顺序 查看下面的代码,你知道哪个先执行吗? package s ...

  4. android 基本布局(RelativeLayout、TableLayout等)使用方法及各种属性

        本文介绍 Android 界面开发中最基本的四种布局LinearLayout.RelativeLayout.FrameLayout.TableLayout 的使用方法及这四种布局中常用的属性. ...

  5. 【真的是随笔】如何利用htaccess把网站流量引到一个页面上(站点维护页效果)

    咕咕咕,好久没来博客园转悠了,最近(这个最近好长啊)一直没时间写博(事实上也不知道写点什么有逼格的东西),所以一直都在潜水,,,(此处省略n字) 好了切入正题,关于如何把网站的所有流量引向一个页面的方 ...

  6. Java for XML: JAXP、JAXB、JAXM、JAX-RPC、JAX-WS

    在XML领域里,对XML文件的校验有两种方式:DTD校验.Schema校验.在Java中,对于XML的解析,有多种方式:DOM解析.SAX解析.StAX解析.结合XML和Java后,就产生了Bind技 ...

  7. 自动kill慢查询

    在生产环境中,DB服务器经常会被并发的慢查询压挂,因此事前进行sql审核避免烂SQL很重要.万一不小心慢sql还是跑到线上,并且并发还不小,这是dba肯定会收到告警.dba上线处理第一时间是定位并ki ...

  8. Android应用程序“.R文件”消失怎么办

    其实Android自己维护这一个 public final class R类主要是跟新资源文件,这个R.java无需我们自己去修改,如果你不了解千万不要去修改它,它定义的每个资源值都是唯一的,不会和系 ...

  9. 单片机温度控制系统DS18B20

    单片机温度控制系统核心 由895X系列单片机来控制来驱动18b20温度传感器模块,通过编写C语言代码,来实现对模块的控制驱动,不断的接收读取18b20传过来的温度信号.将传过来的高低位字节经过个人代码 ...

  10. S5PV210的内存分配研究分析

    S5PV210内存一般会使用SDRAM和DDR2 (DDR SDRAM),SDRAM的uboot启动网络已经有很多资料的,对于DDR2还有有很多疑惑,如果有错误的地方,请大家一定指出,醍醐灌顶,不胜感 ...