Блог

Я использовал отложенную загрузку в проекте. Все работает нормально, пока я использую детализацию (Highcharts). В этом случае, когда я получаю сборку из проекта, модуль, в котором выполняется детализация, загружается первым, а main.js размер файла становится очень большим.

Я использовал Highcharts для отображения карты мира, и я использовал этот метод, чтобы показать провинцию каждой страны при нажатии на нее.

  createDrillDownCountry(data: any, chart: any) {
        const country = data.drilldown,
            mapKey = 'countries/'   country   '/'   country   '-all',
            mapData = require(`@highcharts/map-collection/${mapKey}.geo.json`),
            provinceData = Highcharts.geojson(mapData);
        provinceData.forEach((el: any, i) => {
            if (el.properties['hc-key'] === this.divisionsManagementService.currentDivision) {
                el.selected = true;
            }
            if (Object.keys(this.allDivisions).length > 0 amp;amp; this.allDivisions[country]) {
                for (let index = 0; index < this.allDivisions[country].length; index  ) {
                    if (this.allDivisions[country][index].prefix === el.properties['hc-key']) {
                        el.centerData = this.allDivisions[country][index];
                        el.value = i * 10;
                        break;
                    } else {
                        el.value = 0;
                    }
                }
            }
        });
        chart.addSeriesAsDrilldown(data, {
            name: data.name,
            data: provinceData,
            events: {
                click: (event) => {
                    if (this.addMode) {
                        if (event.point.value === 0 || event.point.value === undefined) {
                            this.clickedOnMap.emit(event);
                        }
                    } else {
                        if (event.point.value > 0) {
                            this.clickedOnMap.emit(event);
                        } else {
                            this.clickedOnMap.emit(false);
                            this.openAddPage.emit(event);
                            this.divisionsManagementService.currentDivision = event.point.properties['hc-key'];
                        }
                    }
                }
            },
            allowPointSelect: true,
            states: {
                select: {
                    color: '#cadbff',
                    borderColor: '#9a9a9a',
                    dashStyle: 'dash'
                }
            },
            tooltip: {
                enabled: false
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        });
    }
 

Интересно, если я удалю этот метод. Отложенная загрузка работает правильно. Но если я использую этот метод. Модуль загружается с самого начала.

измените эту строку

  mapData = require(`@highcharts/map-collection/${mapKey}.geo.json`)
 

с

 import(`@highcharts/map-collection/${mapKey}.geo.json`).then((response) => {
           const provinceData = Highcharts.geojson(response);
}