javascript - 按需导入模块组件

Question

我在我的项目中使用了一个库，并加载了我通过 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.17 MB。

但是，我决定将项目迁移到typescript，从而通过es6的导入来加载lib的组件。代码如下所示:

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

因此 webpack 生成的包大小为 2.21 MB。因为以这种方式加载所有组件都是导入的，即使是我不使用的组件也是如此。

由于这种不便，我希望能够像在 commonjs 中那样做，有人知道这是否可能以及如何做吗？

Answer 1

您可以像在 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'