Рассказ о разделении кода и отложенной загрузке
Вот что делает Webpack прямо с веб-сайта:
webpack - это сборщик статических модулей для современных приложений JavaScript. Когда webpack обрабатывает ваше приложение, он внутренне строит граф зависимостей, который отображает каждый модуль, необходимый вашему проекту, и генерирует один или несколько пакетов. Его основная цель - объединить файлы JavaScript для использования в браузере, но при этом он также может преобразовывать, объединять или упаковывать практически любой ресурс или актив.
В Webpack 4 так много новых замечательных функций, но я хотел выделить только те две, с которыми я работал до сих пор.
- Это невероятно быстро, время сборки сократилось с 60 до 98%.
- Переопределяемый API под названием
optimization.splitChunks
Итак, как новый разработчик, вы можете спросить, почему это имеет значение? Что ж, возможность кодировать разделение / ленивую загрузку вашей веб-страницы делает потрясающие вещи для пользователей. Представьте, что вы ждете загрузки вашей страницы более 5 секунд, это было бы полным отстоем, не так ли? Функция разделения фрагментов Webpack в сочетании с React Loadable поднимет вашу скорость загрузки на новый уровень.
Что такое React Loadable? React Loadable - это компонентно-ориентированное разделение и загрузка кода в React. Таким образом, на простом английском языке он предоставляет компонент более высокого порядка, который можно настроить для динамического импорта определенных компонентов в определенное время. React Loadable делает возможным разделение кода в приложении React. Не стесняйтесь читать больше от создателя здесь.
Что такое расщепление кода? Разделение кода - это метод, при котором приложение загружает только тот код, который ему нужен в данный момент, и не более того. Вы загружаете только то, что вам нужно в данный момент. До этого большинство приложений загружало все сразу. Опять же, попробуйте представить себе время загрузки для этих типов приложений ...
Хорошо, я знаю, что мы прошли большой путь, но, надеюсь, ты все еще со мной. Итак, давайте посмотрим на это в действии. Ознакомьтесь с кодом:
Вот как бы мы реализовали HOC (компонент высшего порядка) react loadable. В этом примере index.js находится в верхней части дерева компонентов.
В этом примере мы используем разбиение на основе маршрута. В этом сценарии компоненты загружаются в соответствии с текущим маршрутом. Итак, давайте рассмотрим, что делает этот код, мы передаем функцию в качестве значения loader, который возвращает компонент, и мы используем import() для его динамического импорта. Резервный пользовательский интерфейс, который мы хотим отобразить до импорта компонента, возвращается loading(). В этом примере мы возвращаем элемент div, хотя мы также можем поместить туда компонент, если захотим.
Давайте посмотрим, как мы могли бы добавить в эту смесь веб-пакет.
Если вы уже много раз использовали webpack, это может показаться вам знакомым, поэтому я не буду вдаваться в подробности каждой строчки кода. Давайте специально рассмотрим вывод, плагины и оптимизацию.
В строке 15 мы добавили chuckFIlename для динамического импорта. Этот параметр определяет имя файлов фрагментов без записи.
Что касается плагинов, мы используем CleanWebpackPlugin, который позволяет нам начинать со свежего пакета сборки каждый раз, когда вы запускаете скрипт webpack. Мы также используем HtmlWebpackPlugin. HtmlWebpackPlugin упрощает создание файлов HTML для обслуживания пакетов веб-пакетов. Это особенно полезно для пакетов веб-пакетов, которые включают хэш в имени файла, который изменяет каждую компиляцию. Вы можете позволить плагину сгенерировать для вас HTML-файл, предоставить свой собственный шаблон, используя шаблоны lodash, или использовать свой собственный загрузчик.
В этом сценарии обработанный HTML-код поступает из template.html, а затем загружается в нашу общую папку. Причина, по которой вы должны использовать это, заключается в том, чтобы вы могли правильно связать свои пакеты веб-пакетов с HTML.
Что касается оптимизации, это предотвращает дублирование. До «SplitChunksPlugin» мы использовали CommonChunkPlugin. SplitChunksPlugin позволяет нам извлекать общие зависимости в существующий блок записи или совершенно новый блок. Группы кэша могут наследовать и / или переопределять любые параметры от splitChunks.*; но test, priorityи reuseExistingChunk можно настроить только на уровне группы кешей.
В этом примере мы создали блок vendors, который включает исходный код из node_modules всего приложения. Этот метод позволяет нам включать только наши основные фреймворки и утилиты и динамически загружать остальные зависимости.
Вот что вы получите, когда запустите свой сценарий связывания
Теперь у нас есть приложение, которое будет работать молниеносно!
Хотите больше информации, посмотрите это крутое youtube video!
Удачного кодирования, ребята !!!
