Разделяй и властвуй! Отложенная загрузка для вашего SPA

Разделяй и властвуй! Отложенная загрузка для вашего SPA

От автора: «Как же это медленно? Я использую только 100 компонентов. Давай же, браузер, делайте свое дело! »Звучит знакомо? Ну, пришло время попробовать повысить производительность. Если вы являетесь веб-разработчиком, скорее всего, вы используете Webpack, и, возможно, вы не знаете, что такое отложенная загрузка.

Что такое отложенная (ленивая) загрузка?

Я знаю, о чем вы подумали: «Ленивый — это не быстрый, это совершенно противоположно тому, что нужно». Вы не ошибаетесь в семантике, но нужно посмотреть на ситуацию под другим углом. Давайте рассмотрим определение для отложенной загрузки, согласно Webpack:

«Отложенная, или «по требованию», загрузка — отличный способ оптимизировать ваш сайт или приложение. Эта практика по существу включает разделение кода на логические точки остановки, а затем его загрузку после того, как пользователь выполнил что-то, для чего требуется новый блок кода».

Другими словами, вы можете разделить свой код так, как хотите (то есть на компоненты), и браузер загрузит только код, необходимый для работы вашего приложения. Звучит потрясающе!

Зачем мне это нужно?

Это простой вопрос. Чтобы повысить производительность! При отложенной загрузке загружается только нужный код, и при этом ваша первоначальная загрузка будет быстрее (потому что вы загрузите гораздо меньше кода), а ваша общая скорость будет намного выше.

Мне также нравится, как вставляется код при ленивой загрузке. Без этого у вас, вероятно, будет HTML-файл, CSS и только один гигантский JS.

Как я могу это сделать?

Прежде всего, вам понадобится Webpack, а с ним, Babel и несколько плагинов.

Теперь, когда мы все подготовили, нам нужно добавить их в .babelrc, наш конфигурационный файл Babel.

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

Вероятно, вы думаете, что вам придется изменить код. Правда в том, что этого не требуется. Единственное, что нужно изменить — это то, как вы импортируете код.

Покажи мне код!

React и Vue — потрясающие фреймворки, и независимо от того, какой из них вы используете, есть простой способ решить, как разделить код. Компоненты! Разделение кода на основе компонентов — это лучшая стратегия, которую вы можете использовать для этих фреймворков.

Асинхронный маршрут React с использованием react-loadable

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

Асинхронный компонент Vue

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

И, конечно, мы не можем забыть об Angular , поскольку мы можем также сделать это, изменив только конфигурацию:

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

Приложение React с отложенной загрузкой

Здесь мы отделяем асинхронный маршрут нашего приложения от основного блока кода. Теперь у нас есть фрагменты, как мы хотим, чтобы это работало? Давайте посмотрим на представление «Сеть» в консоли браузера при загрузке представления:

Запросы Chrome к нашим компонентам используются только в этом представлении

Эти пронумерованные JS-файлы являются нашими асинхронными компонентами, загружаемыми только тогда, когда это необходимо. Эти запросы являются компонентами Vue без какого-либо пакета, что работает также, как react-loadable, поэтому они не хешируются, как на изображении выше (последнее из них — приложение React)

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

Автор: Martin Callegari

Источник: https://medium.com/

Редакция: Команда webformyself.

Full-Stack практика. Создание JavaScript блога

Создание веб-приложения с нуля на JavaScript, NodeJS, ExpressJS

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree