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

现象,在一个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);

来自为知笔记(Wiz)

时间: 2024-10-13 12:28:08

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

webpack+vue开发环境搭建

前提: 1.安装必要工具(node等); 2.安装全局vue-cli脚手架(快速搭建vue开发模板) 命令:npm install -g vue-cli 3.安装webpack 命令:npm install webpack -g (有问题可以使用npm install --save-dev webpack-cli -g命令) 4.运行命令: vue init webpack 项目名 注:回车后可能显示 Command vue init requires a global addon to be

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

[原创]win10下搭建vue开发环境 如果要转发,请注明原作者和原产地,谢谢! 特别说明:下面任何命令都是在windows的命令行工具下进行输入,打开命令行工具的快捷方式如下图: 详细的安装步骤如下: 一.安装node.js 说明:安装node.js的windows版本后,会自动安装好node以及包管理工具npm,我们后续的安装将依赖npm工具. node.js的官方地址为:https://nodejs.org/en/download/,如下图所示: 根据自己电脑的具体配置,选择你要下载的安装

面试官:自己搭建过vue开发环境吗?

转自大佬:不懂代码的攻城师 开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后npm run install 安装依赖,npm run serve启动项目然后就开始写业务代码了. 但是对项目里的webpack封装和配置了解的不清楚,容易导致出问题不知如何解决,或者不会通过webpack去扩展新功能. 该篇文章主要是想告诉小伙伴们,如何一步一步的通过 webpack4来搭建自己的vue开发环

搭建vue开发环境的步骤,六步完成

搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:http://nodejs.cn:注意是32还是64位:二:下载好node之后,打开docs管理工具,先看看node安装成功了没有,输入 node -v ,回车,会输出node的版本号. 三:淘宝镜像安装成功之后,我们就可以全局vue-cli脚手架,输入命令:npm install --global

搭建 webpack + React 开发环境

说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考. 正文开始 我就假装大家都是装了node的情况下. 1.进入项目目录,运行`npm init`按照步骤填写最终生成`package.json`文件,所有使用 npm 做依赖管理的项目,根目录下都会有一个这个文件,该文件描述了项目的基本信息以及一些第三方依赖项(插件).详细的使用说明可查阅[官网文档

vue开发环境和生产环境里面解决跨域的几种方法

  跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu.com访问https://a.baidu.com: #端口跨域 http://a.baidu.com:8080访问http://a.baidu.com:80: #域名跨域 http://a.baidu.com访问http://b.baidu.com:   现在很多公司都是采用前后分离的方式开发.那么出现经常和会

Visual Studio Code 配置VUE开发环境

简介 VSCode(Visual Studio Code)这款开发工具是微软官方出品,开源,免费.功能相当强大.插件丰富,使用者很多,是Vue开发的不二之选.下面讲解下VSCode 配置VUE开发环境 下载 官方:https://code.visualstudio.com/ 在官方下载安装包,点击操作按照指导进行安装就可以,过程比较简单,这里不进行详细介绍. 概念讲解(Workspace&Folder) VSCode中分Workspace和Folder,Workspace相当于是一个项目的集合,

如何将linux用在开发环境中的

如何将linux用在开发环境中的 1.我为什么要写这篇文章 一直想深入学习一下linux的使用,于是将家里的笔记本装了linux系统,但是要将自己的系统打造一个适合开发的环境确实是一件费心费力的事,而且会经常出现一些莫名其妙的问题,以我自己的使用经验觉得要想用linux做开发环境,你要了解每个软件,不然出现一些问题就很难解决,其他不说,就是光搞好驱动问题就让人蛋疼了. 我的电脑装了linux之后一直高温不下,在网上找了一些方法,关掉独显也好不了多少,开机2个小时温度就飙到70-90度,试过很多发

[原]Unity3D深入浅出 - 认识开发环境中的Layers面板

Layers(分层)下拉列表:用来控制Scene视图中游戏对象的显示,在下拉菜单中为勾选状态的物体将显示在Scene视图中. Everything:显示所有的游戏对象 Nothing:不显示任何游戏对象 Default:显示没有任何控制的游戏对象 TransparentFX:显示透明的游戏对象 Igonore Raycast:显示不处理投射事件的游戏对象 Water:显示水对象 EditLayers:编辑层 尊重他人劳动成功,转载请注明出处:http://www.cnblogs.com/tong