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

时间：2016-08-19 09:53:44 阅读：580 评论：0 收藏：0 [点我收藏+]

标签：

现象，在一个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标签如下：

（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);

标签：

原文地址：http://www.cnblogs.com/strinkbug/p/5786222.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行