Разделение кода делает ваш пакет привлекательным и привлекательным
Я предполагаю, что вы знали, что такое расщепление кода, или слышали об этом. Что бы это ни было, я покажу вам, как вы тоже можете это сделать!
Хорошо, давай сделаем это быстро! Сделай это!
👶 Плагин Babel, который делает это возможным
// babel.config.js
module.exports = {
plugins: ["@babel/plugin-syntax-dynamic-import"]
}
Разделение кода достигается с помощью стандартного синтаксиса JS import('<path_to_file>'). Когда webpack видит этот динамический импорт во время компиляции, он создает отдельный «кусок» для каждого из них.
Например, import('./complicated_hello_world.jsx') будет выводиться веб-пакетом как complicated_hello_world.sdhs98ewshd98.js в папке build / dist.
👲 AsyncComponent.jsx
💂 Компонент загрузчика маршрутов
Сначала мы сделаем разделение кода на основе маршрута. Мы сделаем более детальное разделение на основе компонентов за секунду.
Хорошо, допустим, у вас есть папка маршрута с именем Payment, создайте внутри файл с именем Payment.loader.jsx:
👵 Использование
👷 Компонентное разделение кода
Теперь, когда мы выполнили разделение кода на наших маршрутах, давайте с легкостью применим тот же подход к нашим компонентам!
Допустим, мы не хотим отправлять наши чудовищные тексты Условий использования вместе с нашим первоначальным app.js пакетом. Сначала мы создаем компонент для содержимого TnC:
Затем в нашем основном компоненте TnC:
Итак, что произойдет, когда TermsOfUse будет визуализирован, <AsyncComponent /> будет динамически загружать наш <TermsOfUseContent />, показывая счетчик, как указано в <AsyncComponent />, и отображать его, когда он будет готов.
Вот и все! Больше не нужно изучать сторонние библиотеки. Сохраняйте полный контроль над своей судьбой. Напишите свой собственный JS в соответствии с вашим уровнем навыков в удобном для вас темпе с идиоматической парадигмой React, основанной на однократном изучении. Кроме того, вы теперь тоже едете на поезде по расщеплению кода! 🚡
