按需导入模块组件答案

【问题标题】：Import module components on demand按需导入模块组件
【发布时间】：2018-08-04 11:23:53
【问题描述】：

我在我的项目中使用了一个库，并加载了我通过 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 那样做，有人知道这是否可能以及如何做？

【问题讨论】：

import {ECharts} from "echarts"
import {Echarts, EchartOption} from 'echarts' 不会成功吗？

标签： javascript typescript import ecmascript-6 commonjs

【解决方案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'

【讨论】：