Ленивая загрузка

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

Пример

Давайте возьмём пример из Разбиения кода и немного его изменим, чтобы ещё нагляднее продемонстрировать этот принцип. Приведённый там код приводит к созданию отдельного фрагмента, lodash.bundle.js, и, теоретически, к его «ленивой загрузке» сразу после выполнения скрипта. Проблема в том, что для загрузки пакета не требуется никакого взаимодействия пользователя — это значит, что каждый раз при загрузке страницы запрос будет отправлен. Это не сильно нам помогает и негативно скажется на производительности.

Давайте попробуем что-то другое. Мы добавим взаимодействие для вывода текста в консоль, когда пользователь нажмёт кнопку. Однако мы подождём с загрузкой этого кода (print.js) до момента первого взаимодействия. Для этого мы вернёмся к последнему примеру динамических импортов из раздела «Разбиение кода» и оставим lodash в основном фрагменте.

project

webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
|- /src
  |- index.js
+ |- print.js
|- /node_modules

src/print.js

console.log(
  'The print.js module has loaded! See the network tab in dev tools...'
);

export default () => {
  console.log('Button Clicked: Here\'s "some text"!');
};

src/index.js

+ import _ from 'lodash';
+
- async function getComponent() {
+ function component() {
    const element = document.createElement('div');
-   const _ = await import(/* webpackChunkName: "lodash" */ 'lodash');
+   const button = document.createElement('button');
+   const br = document.createElement('br');

+   button.innerHTML = 'Click me and look at the console!';
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   element.appendChild(br);
+   element.appendChild(button);
+
+   // Note that because a network request is involved, some indication
+   // of loading would need to be shown in a production-level site/app.
+   button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
+     const print = module.default;
+
+     print();
+   });

    return element;
  }

- getComponent().then(component => {
-   document.body.appendChild(component);
- });
+ document.body.appendChild(component());

Теперь давайте запустим webpack и посмотрим на нашу новую функциональность ленивой загрузки:

...
          Asset       Size  Chunks                    Chunk Names
print.bundle.js  417 bytes       0  [emitted]         print
index.bundle.js     548 kB       1  [emitted]  [big]  index
     index.html  189 bytes          [emitted]
...

Фреймворки

Многие фреймворки и библиотеки предлагают свои рекомендации по реализации этого метода в рамках их методологий. Вот несколько примеров:

• React: Разбиение кода и ленивая загрузка
• Vue: Динамические импорты в Vue.js для лучшей производительности
• Angular: Конфигурация ленивой загрузки маршрутов и AngularJS + webpack = lazyLoad