apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.63k stars 19.61k forks source link

Tree shaking support #13700

Closed wenfangdu closed 3 years ago

wenfangdu commented 3 years ago

What problem does this feature solve?

Minimize bundle size.

What does the proposed API look like?

import { LineChart } from 'echarts'

pissang commented 3 years ago

Currently, partially bundling can be done by

import chart from 'echarts/lib/chart/line';

But we are planning a better API which is similar to you suggested.

pissang commented 3 years ago

It's already in the 5.0.1

wenfangdu commented 3 years ago

@pissang Awesome! Just a small side note, echarts.use document is missing. image

pissang commented 3 years ago

@wenfangdu Sorry for missing it. Will update it

htr3n commented 3 years ago

@pissang I used ECharts on the server-side based on your example here: https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73.

I configured my Node project to use ESM by default and wanted to use tree-shaking for small bundle (https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide/#tree-shaking-api).

Nonetheless, the following line throw an exception

import * as echarts from 'echarts/core';

The exception

/usr/bin/node /home/alext/Projects/NodeJS/echarts-ssr/demo/main.js
internal/process/esm_loader.js:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/alext/Projects/NodeJS/echarts-ssr/node_modules/echarts/core' imported from /home/alext/Projects/NodeJS/echarts-ssr/index.js
Did you mean to import echarts-ssr/node_modules/echarts/core.js?
    at new NodeError (internal/errors.js:322:7)
    at finalizeResolution (internal/modules/esm/resolve.js:308:11)
    at moduleResolve (internal/modules/esm/resolve.js:731:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:842:11)
    at Loader.resolve (internal/modules/esm/loader.js:89:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)
    at link (internal/modules/esm/module_job.js:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Here is the package.json of my project

{
  "name": "echarts-ssr",
  "description": "",
  "version": "0.0.1",
  "main": "index.js",
  "author": "",
  "license": "MIT",
  "private": true,
  "type": "module",
  "dependencies": {
    "canvas": "^2.8.0",
    "echarts": "^5.2.1",
    "jsdom": "^17.0.0"
  },
  "devDependencies": {
    "@types/node": "^14",
    "tslint": "^6.1.3",
    "typescript": "^4.4.3"
  },
  "packageManager": "yarn@3.0.2"
}

How can I import sub-modules of ECharts as I did in another (React) project?

import {LineChart} from "echarts/charts";
import {SVGRenderer} from "echarts/renderers";