Реагирует на root.js весом около 9 МБ - PullRequest
0 голосов
/ 21 марта 2019

Хорошо, так ... У меня есть этот проект, в котором мы используем много компонентов (как обычно в каждом проекте React), но когда мы компилируем проект, чтобы увидеть его в браузере (то есть. foreman start), требуетсямного времени для загрузки, а также, когда он загружается, он создает файл очень очень большого размера.

Мы не знаем, почему это происходит, возможно, мы что-то напутали и пока не знаем,

Я не знаю, какую часть кода вам нужно увидеть, чтобы помочь мне понять, почему это происходит.Дайте мне знать, и я передам его вам.

Кроме того, я хочу знать, есть ли способ не допустить, чтобы этот файл был таким большим, если я знаю, что он должен весить не более 2 МБ или что-то в этом роде...

enter image description here

Заранее спасибо!

1 Ответ

0 голосов
/ 21 марта 2019

Типичная причина таких проблем - не количество созданных вами компонентов, а используемые вами библиотеки.Вы можете проверить причину большого пакета, сначала запустив

webpack --json > stats.json

, а затем установив и запустив анализатор пачек веб-пакетов

webpack-bundle-analyzer stats.json

После этого вам нужно начать работу по устранению причины большого размера.

Обычно это зависит от причины большого размера пакета ... но следующие методыбезусловно, поможет.

import {x, y} from 'library';

to

import x from 'library/x';
import y from 'library/y';

Что бы гарантировать, что при наличии 10 экспортов из библиотеки все они не загружаются ... Только те, которые необходимы.Например, если вы используете lodash,

import {debounce} from 'lodash';

импортирует всю библиотеку lodash, а

import debounce from 'lodash/debounce';

будет импортировать только этот конкретный файл.Существуют и другие способы оптимизировать вывод (например, внешние веб-пакеты ), но это зависит от того, что на самом деле вызывает проблему.

ПРИМЕЧАНИЕ Во многих ответах предполагается, чтоВы используете веб-пакет для связывания кода.Однако, если это не так, вам нужно будет найти оптимизацию и проанализировать пакет для конкретного инструмента пакетирования, который вы используете

...