Разделяй и властвуй! Ленивая загрузка для вашего СПА

Разделяй и властвуй! Ленивая загрузка для вашего СПА

Увеличьте производительность с помощью всего лишь Webpack

«Как, черт возьми, это так медленно? Я просто использую 100 компонентов. Заходите в браузер, делайте свое дело! » Звучит знакомо? Что ж, пора попробовать повысить производительность.

Если вы веб-разработчик, скорее всего, вы используете Webpack в качестве сборщика модулей и, вероятно, не знаете, что такое ленивая загрузка.

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

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

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

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

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

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

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

Как я могу этого добиться?

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

npm i -D dynamic-import-webpack syntax-dynamic-import

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

{
  "plugins": [
    ...
    "dynamic-import-webpack",
    "syntax-dynamic-import"
  ],
  "presets": [
    ["env", {
      "targets": [
        "last 2 versions", "safari >= 7", "not ie < 9"
      ]
    }]
  ]
}

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

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

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

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

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

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

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

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

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

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

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