Внедрение динамического импорта Webpack в <body>вместо <head> - PullRequest
Новая
       61

Внедрение динамического импорта Webpack в <body>вместо <head>

1 голос
/ 25 июня 2019

У меня есть проект, в котором я использую turbolinks в сочетании с динамическим импортом Webpack.

У меня есть то, что исходный файл javascript настолько мал, насколько это возможно, а затем для каждой страницы,Я загружаю соответствующий код JavaScript: 

document.addEventListener('turbolinks:load', () => {
  const moduleName = document.body.dataset.route;
  if (!moduleName) return;

  const chunkName = moduleName.replace('.', '/');
  import(/* webpackChunkName: "js/pages/[request]" */ `@pages/${chunkName}`)
    .catch((e) => {console.error(e);});
});

Динамический импорт Webpack внедряется в часть <head> страницы, что отлично подходит для любого другого случая использования, когда вы хотите загружать сторонние пакеты.Однако, поскольку я хочу загрузить скрипт, специфичный для конкретной страницы, мне нужно, чтобы этот скрипт перезапускался при каждом изменении страницы.

Поскольку я использую Turbolinks , обновление страницы не выполняется. Turbolinks делает то, что он перехватывает запрос и выполняет запрос как запрос XHR.Затем он заменяет тег <body> и объединяет тег <head>.

Теперь проблема в том, что всякий раз, когда Turbolinks объединяет заголовок, он будет сохранять загруженный сценарий для каждой страницы, заставляя сценарий не запускаться повторно при последующих запросах к той же странице (помните,обновление страницы не происходило).

Лучший способ решить эту проблему - сказать веб-пакету вставлять определенные сценарии (например, сценарии для конкретной страницы) в тег <body>, так как он полностью заменяетсякаждая страница (посещение).Фактически, это то, что Turbolinks упоминает в своих документах, когда у вас есть скрипты для каждой страницы.

Я пытался выяснить, как это сделать, но не смог найти ни одного ресурсаоб этом.

На самом деле существует другое решение: экспортировать функцию по умолчанию со всех страниц, относящихся к конкретной странице, и просто вызывать эту функцию после импорта: 

import(/* webpackChunkName: "js/pages/[request]" */ `@pages/${chunkName}`)
  .then(p => p.default())

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

...