echarts 按需使用

作者: kakaka0234 | 来源:发表于2019-06-19 15:37 被阅读0次

官网定制地址： https://echarts.baidu.com/builder.html

背景

使用 echarts 的常规步骤

import echats from 'echarts'

const chart = echarts.init('document_id')
chart.setOption({
  // blablabla
})

问题

这个时候当大家检查打包的文件大小的时候，发现 echarts 的文件包异常的大 2.02M 。因为所有的功能都被打进来啊。

image.png

官方提供了在线定义功能，可以按需打包需要的 js 文件；官网定制地址： https://echarts.baidu.com/builder.html

image.png
选用折线图、柱状图、仪表盘三个模块， 347KB，减少了 4/5 的无效代码。

image.png

使用方法

<!-- index.html -->
<body>
  <div id="app"></div>
  <script src="./echarts.min.js"></script>
  <!-- built files will be auto injected -->
</body>

// webpack.config.js
module.exports = {
  //...
  externals: {
    echarts: 'echarts'
  }
};

// chart.js
import echats from 'echarts'

const chart = echarts.init('document_id')
chart.setOption({
  // blablabla
})

本文标题：echarts 按需使用

本文链接：https://www.haomeiwen.com/subject/xqjkqctx.html