javascript - 按需导入模块组件

我在我的项目中使用了一个lib，并通过commonjs模块系统加载了它的组件。代码如下所示：

let echart = require('echarts/lib/echarts');
require('echarts/lib/chart/scatter');
require('echarts/lib/component/title');
require('echarts/lib/component/toolbox');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/legendScroll');

因此，webpack生成的包大小为1.17mb。
但是，我决定将项目迁移到typescript，从而通过导入es6来加载lib的组件。代码如下所示：

import * as echarts from 'echarts';
import ECharts = echarts.ECharts;
import EChartOption = echarts.EChartOption;

所以这个webpack生成的包大小是2.21mb。
因为以这种方式加载所有组件都是导入的，即使是我不使用的组件。
由于这个不便，我想能够做在CommonJS中，有人知道它是否可能和如何做？

最佳答案

您可以执行与CommonJS中相同的深度嵌套：

import echarts = require('echarts/lib/echarts')
import 'echarts/lib/chart/scatter'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legendScroll'

如果在typescript 2.7中使用esModuleInterop，则可以在第一行执行此操作：

import echarts from 'echarts/lib/echarts'