Highcharts: Memodulasi Highchart? Kemampuan menggoyang pohon.

Dibuat pada 24 Jul 2018 · 14Komentar · Sumber: highcharts/highcharts

Saya menggunakan Highcharts dan Highstocks dengan Angular di aplikasi saya. Fungsionalitasnya bagus, namun tidak mungkin untuk mengoptimalkan ukuran bundel Highcharts:
Lihatlah tangkapan layar ini dari informasi bundel aplikasi saya:
screen shot 2018-07-24 at 12 07 05 pm
Anda dapat melihat bahwa Highcharts memakan hingga hampir 500kb (garis biru tua), bahkan lebih besar dari kerangka chunky seperti Angular (garis merah). Bahkan jika seseorang hanya menggunakan satu bagan di Highcharts, mereka harus menjalankan semua kode Highcharts, yang tidak dapat diterima secara optimal.

Solusi yang saya tahu di sini adalah memodulasi Highcharts sehingga seseorang hanya dapat mengimpor apa yang mereka butuhkan. Juga dengan Webpack Tree Shaking baru, ukuran bundel akan sangat berkurang.
Saya tahu ini tidak dapat segera diperbaiki, tetapi apakah Anda memikirkannya?

TypeScript Enhancement

Sumber

envil

👍35 ❤2

Komentar yang paling membantu

Hai, beberapa waktu lalu kami mulai menerbitkan file bagian kami sebagai modul ES yang berarti Anda dapat melakukan import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js' . Ini dapat membantu beberapa orang dalam masalah ini.

Kami juga sedang bekerja untuk membuat file bagian ini lebih mandiri, yang akan meningkatkan kemampuan pengocokan pohon. Agak sulit saat ini untuk memberikan ETA yang baik kapan ini akan diterbitkan, tetapi saya akan terus memberi Anda informasi terbaru segera setelah saya tahu lebih banyak.

jon-a-nygaard pada 24 Apr 2019

👍10 ❤3

Semua 14 komentar

Hai @envil ,
Pada awalnya saya menyarankan Anda untuk memuat hanya highstock.js yang mencakup semua fitur Highcharts. Anda juga dapat membuat file khusus dengan alat kami di sini:

https://www.highcharts.com/download

sebastianbochan pada 24 Jul 2018

👍1

Highcharts lib sudah termodulasi: https://www.highcharts.com/docs/getting-started/how-to-create-custom-highcharts-files

pawelfus pada 24 Jul 2018

Terima kasih atas tanggapan Anda.
Saya sedang melihat fitur pembuatan khusus. Ini memberi saya highchart-custom.src.js yang sama sekali tidak nyaman digunakan karena ini bukan node_modules, jadi saya tidak dapat mengimpornya ke aplikasi Angular saya secara biasa. Dan semua definisi tipe untuk TypeScript hilang.

envil pada 24 Jul 2018

👍6

Juga yang saya maksud adalah modul ES, sepenuhnya independen dan dapat diimpor ke modul ES lainnya. Lihat bagaimana lodash dan date-fns telah mengalahkan underscore dan momentjs , salah satu faktor terpenting adalah kemampuan modularisasi seperti ini.

envil pada 24 Jul 2018

👍10

@jon-a-nygaard FYI

TorsteinHonsi pada 1 Agu 2018

Saya mengalami ini juga.
Saya mencoba berkeliling dengan import * as Highstock from 'highcharts/highstock'; tetapi tidak berpengaruh apa pun.

GeorgeKnap pada 23 Apr 2019

jon-a-nygaard pada 24 Apr 2019

👍10 ❤3

Hai,

saya hanya menggunakan tipe 'stockChart' dan mengalami masalah yang sama, tetapi menemukan solusi yang dijelaskan di sini:
https://github.com/highcharts/highcharts-angular#core

import * as Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';
Stock(Highcharts);

dari pada :
import * as Highcharts from 'highcharts/highstock';

sekarang dalam bundel, tampilannya seperti ini:
screen

ymanvieu pada 29 Apr 2019

👍3

Saya menggunakan highcharts-react yang menggunakan sintaks import *. Saya belum menyerah tetapi sejauh ini saya tidak bisa membuat pohon gemetar bekerja untuk itu.

https://github.com/highcharts/highcharts-react/blob/08cd61ca178276d716ae65fba76e1d07924b2838/src/HighchartsReact.d.ts#L6

fantapop pada 16 Mei 2019

Solusi saya saat ini: modul Alias Highcharts ke modul Highstock.

Anda dapat menggunakan kedua jenis grafik (Highcharts/Highstock) dan ukuran bundel yang lebih rendah .

Ini dapat dilakukan dengan Webpack (periksa "resolve.alias" di dokumentasi Webpack untuk informasi lebih lanjut):

    alias: {
      highcharts$: 'highcharts/highstock.js',
    }

Anda dapat melakukan aliasing dengan Babel to (babel-plugin-module-resolver).

Akan lebih baik jika kita dapat memodulasi seluruh lib.

kMeillet pada 12 Jun 2019

Perhatikan bahwa Highstock dapat dimuat sebagai modul ke Highcharts, menggunakan modul modules/stock.js . Seperti yang disebutkan di atas:

import * as Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';
Stock(Highcharts);

pawelfus pada 13 Jun 2019

@pawelfus Entah bagaimana gagal dalam pengujian saya dengan: TypeError: Highcharts.stockChart is not a function

Tidak ada masalah tipe dan aplikasi itu sendiri juga berfungsi. Saya menggunakan lelucon. Ada ide?

MEMPERBARUI
Menemukan bahwa menyelesaikan modul secara berbeda di jest.config.js berfungsi:

  moduleNameMapper: {
    '^highcharts$': '<rootDir>/node_modules/highcharts/highstock'
  },

mediafreakch pada 28 Feb 2020

👍1

Ada pembaruan tentang ini? Mempertimbangkan menjatuhkan Highcharts karena ini benar-benar perpustakaan BESAR untuk diimpor ke proyek saya :(

Yohandah pada 17 Jul 2020

Hai @Yohandah! Kami hampir setengah jalan, seperti yang Anda lihat di https://github.com/highcharts/highcharts/issues/12738.

Anda dapat menggunakan sebagian besar modul ES untuk menggoyang pohon. Meskipun ini untuk saat ini tidak didukung secara resmi (hanya master), karena kami sedang memindahkan dan membagi file sekarang. Jadi dengan rilis berikutnya, jalur dalam contoh akan berbeda.

import Chart from 'https://code.highcharts.com/es-modules/parts/Chart.js'
import SVGRenderer from 'https://code.highcharts.com/es-modules/parts/SVGRenderer.js'
new Chart('container', { /* ...options... */ });

https://jsfiddle.net/xtof0m14/