echarts 按需使用

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

背景

使用 echarts 的常规步骤

  • npm i -S 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
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容