javascript - Importera moduler och komponenter vid behov


Jag använder ett bibliotek i mitt projekt och laddar komponenterna av det som jag förinställt genom CommonJS-modulsystemet. Koden ser ut så här:

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');

Så paketet som genererats av webpack är 1,17 MB stort.

Men jag bestämde mig för att migrera projektet till TypeScript och därmed ladda komponenterna i biblioteket genom importen av ES6. Koden ser ut så här:

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

Så paketet som genereras av webpack är 2,21 MB stort. Eftersom alla komponenter importeras när man laddar på detta sätt, även de som jag inte använder.

På grund av denna olägenhet skulle jag vilja kunna göra som i commonjs, vet någon om det är möjligt och hur man gör det?

Svar #1

Du kan göra samma djupa nästling som i 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'

Om du använder esModuleInterop i TypeScript 2.7, kan du göra detta för den första raden:

import echarts from 'echarts/lib/echarts'