Реакция компонентов большого размера

Question

Нормально ли иметь размер более 700 кБ в размере файла для реагирующего компонента? Это размер файла после компиляции.

GridComponent.js 732 kB  0 [emitted] GridComponent 
    main.js 7.97 kB  1 [emitted] main 

GridComponent является реагирующим компонентом. main является нормальным js для сравнения.

Это нормально? Я планирую включать только компоненты реакции на требуемые страницы.

Answer 1

Я вижу, что вы используете Webpack в вашем приложении, и ваш GridComponent.js должны иметь что-то вроде require('react'); (или import React from 'react';, при использовании модулей ES6 с Вавилонской).

Когда вам потребуются вещи, веб-пакет будет «присоединяться» ко всем вашим зависимостям в указанных «выходных» настройках (предоставляется в webpack.config.js). Итак, если вы проверите содержимое GridComponent.js, вы увидите, что React внутри. В вашем случае этот GridComponent.js является вашим «связанным файлом» (он будет содержать все импортированные вами зависимости). Вот почему он кажется «большим», потому что этот файл содержит ваш компонент и сам React (и другие зависимости).

Когда вы говорите: «Я планирую включать только компоненты реагирования на требуемые им страницы». Я думаю, вы можете захотеть сменить код, чтобы ваша страница загружала только то, что вам нужно. Вы можете проверить более подробную информацию о коде расщеплению здесь:

https://webpack.github.io/docs/code-splitting.html

Основной «расщепление» стратегия будет разделить ваш «поставщика» код из «приложения» кода (https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code). В вашем случае React, React DOM и другие «общие» зависимости переходят к «поставщику», а ваше приложение - это код, который вы написали.

Но так же, как совет, разделение кода только действительно необходимо, если у вас много кода. Потому что иногда дополнительный сетевой запрос может вводить больше «задержек», чем загрузка еще нескольких байтов. Или если у вас есть какая-то «специальная» стратегия кеширования, так как ваше приложение может меняться больше раз, чем ваш код поставщика (ваш код поставщика будет загружаться только после изменения какой-либо версии зависимостей), и вы избегаете загрузки большого количества байтов, когда простая вещь в вашем приложении.

Я думаю, что это решает ваш вопрос, но для добавления дополнительной информации здесь, если вы хотите распространять свой код для большего количества людей (например, проект с открытым исходным кодом), вы можете распространять свой код и сказать «хорошо, вы должны установить эту другую зависимость », и вы можете достичь этого с помощью peer dependencies.

Если одноранговые зависимости не в вашем случае, вы можете сохранить некоторые байты, уменьшив свой файл (вы можете это сделать, изменив конфигурацию вашего веб-пакета). Хороший блог говорить об этом можно найти здесь:

http://moduscreate.com/optimizing-react-es6-webpack-production-build/