Jak na paczce internetowej mogę zaimportować skrypt bez jego oceny?

Niedawno pracuję nad niektórymi pracami związanymi z optymalizacją witryny i zacząłem używać podziału kodu w pakiecie internetowym, używając instrukcji importu w następujący sposób:

import(/* webpackChunkName: 'pageB-chunk' */ './pageB')

Który prawidłowo stworzyć stronaB-chunk.js , teraz powiedzmy chcę wstępne pobieranie ten kawałek w Strona A, mogę to zrobić przez dodanie tego oświadczenia w Strona A:

import(/* webpackChunkName: 'pageB-chunk' */ /* webpackPrefetch: true */ './pageB')

Co spowoduje, że

<link rel="prefetch" href="pageB-chunk.js">

dołączając do nagłówka HTML, przeglądarka go pobierze, jak dotąd tak dobrze.

Problem polega na tym , że używam tutaj instrukcji importu , nie tylko pobierając plik js, ale także oceniam plik js, co oznacza, że ​​kod tego pliku js jest analizowany i kompilowany do kodów bajtowych, wykonywany jest kod najwyższego poziomu tego JS.

Jest to bardzo czasochłonna operacja na urządzeniu mobilnym i chcę ją zoptymalizować, chcę tylko część pobierania wstępnego , nie chcę części oceniania i wykonywania , ponieważ później, gdy wystąpią pewne interakcje użytkownika, uruchomię analizę składniową i oceniam siebie

↑ ↑↑↑↑↑↑ Tylko chcę uruchomić dwa pierwsze kroki, zdjęcia pochodzą z https://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/ ↑↑ ↑↑

Jasne, że mogę to zrobić, dodając link pobierania wstępnego osobiście, ale oznacza to, że muszę wiedzieć, który adres URL powinienem umieścić w łączu pobierania wstępnego, webpack zdecydowanie zna ten adres URL, jak mogę go uzyskać z pakietu internetowego?

Czy webpack ma łatwy sposób na osiągnięcie tego?

AKTUALIZACJA

Możesz użyć preload-webpack-plugin z html-webpack-plugin , pozwoli ci to określić, co ma zostać wstępnie załadowane w konfiguracji i automatycznie wstawi tagi, aby wstępnie załadować swoją porcję

Uwaga: jeśli używasz WebPack v4, będziesz musiał zainstalować tę wtyczkę za pomocą preload-webpack-plugin@next

przykład

plugins: [
  new HtmlWebpackPlugin(),
  new PreloadWebpackPlugin({
    rel: 'preload',
    include: 'asyncChunks'
  })
]

W przypadku projektu generującego dwa skrypty asynchroniczne z dynamicznie generowanymi nazwami, takimi jak chunk.31132ae6680e598f8879.jsi chunk.d15e7fdfc91b34bb78c4.js, następujące wstępne obciążenia zostaną wstrzyknięte do dokumentuhead

<link rel="preload" as="script" href="chunk.31132ae6680e598f8879.js">
<link rel="preload" as="script" href="chunk.d15e7fdfc91b34bb78c4.js">

AKTUALIZACJA 2

jeśli nie chcesz wstępnie ładować całego fragmentu asynchronicznego, ale tylko określony, gdy możesz to zrobić

możesz użyć wtyczki babcodera migcodera lub wykonaćpreload-webpack-plugin następujące czynności

1. najpierw będziesz musiał nazwać ten fragment asynchroniczny za pomocą webpack magic commentprzykładu

   import(/* webpackChunkName: 'myAsyncPreloadChunk' */ './path/to/file')

2. a następnie w konfiguracji wtyczki użyj tej nazwy jak

   plugins: [
     new HtmlWebpackPlugin(),   
     new PreloadWebpackPlugin({
       rel: 'preload',
       include: ['myAsyncPreloadChunk']
     }) 
   ]

Przede wszystkim zobaczmy zachowanie przeglądarki, gdy określimy scripttag lub linktag, aby załadować skrypt

1. za każdym razem, gdy przeglądarka napotka scriptznacznik, załaduje go, przeanalizuje i natychmiast wykona
2. możesz jedynie opóźnić parsowanie i ocenę za pomocą tagu asynci tylko do zdarzeniadeferDOMContentLoaded
3. możesz opóźnić wykonanie (ocenę), jeśli nie wstawisz znacznika skryptu (tylko wstępnie go załaduj link)

Teraz istnieje jakiś inny nie zaleca hackey sposobem jest transportowanie cały scenariusz i stringalbo comment(bo czas oceny z komentarzem lub ciąg jest znikomy) i gdy trzeba wykonać, że można użyć Function() constructoralbo evalobie nie są zalecane

Inne podejście do usług pracowników: (pozwoli to zachować pamięć podręczną po ponownym załadowaniu strony lub użytkownik przejdzie w tryb offline po załadowaniu pamięci podręcznej)

W nowoczesnej przeglądarce możesz użyć service workerdo pobrania i buforowania odwołania (JavaScript, obraz, css cokolwiek), a gdy żądanie głównego wątku dla tego odwołania możesz przechwycić to żądanie i zwrócić odwołanie z pamięci podręcznej w ten sposób, nie analizujesz i nie oceniasz skryptu, gdy ładujesz go do pamięci podręcznej. Dowiedz się więcej o pracownikach serwisu tutaj

przykład

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/sw-test/',
        '/sw-test/index.html',
        '/sw-test/style.css',
        '/sw-test/app.js',
        '/sw-test/image-list.js',
        '/sw-test/star-wars-logo.jpg',
        '/sw-test/gallery/bountyHunters.jpg',
        '/sw-test/gallery/myLittleVader.jpg',
        '/sw-test/gallery/snowTroopers.jpg'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).then(function(response) {
    // caches.match() always resolves
    // but in case of success response will have value
    if (response !== undefined) {
      return response;
    } else {
      return fetch(event.request).then(function (response) {
        // response may be used only once
        // we need to save clone to put one copy in cache
        // and serve second one
        let responseClone = response.clone();

        caches.open('v1').then(function (cache) {
          cache.put(event.request, responseClone);
        });
        return response;
      }).catch(function () {
        // any fallback code here
      });
    }
  }));
});

jak widać, nie jest to zależne od pakietu WebPack, nie wchodzi ono w zakres pakietu WebPack, jednak za pomocą pakietu WebPack można podzielić pakiet, co pomoże lepiej wykorzystać pracownika serwisu

Aktualizacje: dołączam wszystkie rzeczy do pakietu npm, sprawdź to! https://www.npmjs.com/package/webpack-prefetcher

Po kilku dniach badań kończę pisanie dostosowanej wtyczki babel ...

Krótko mówiąc, wtyczka działa w następujący sposób:

• Zbierz wszystkie instrukcje importu (args) w kodzie
• Jeśli import (args) zawiera / * prefetch: true * / comment
• Znajdź chunkId z () import wyciągu
• Zamień go na Prefetcher.fetch (chunkId)

Prefetcher to klasa pomocnicza, która zawiera manifest danych wyjściowych webpacka i może nam pomóc w wstawieniu linku pobierania wstępnego:

export class Prefetcher {
  static manifest = {
    "pageA.js": "/pageA.hash.js",
    "app.js": "/app.hash.js",
    "index.html": "/index.html"
  }
  static function fetch(chunkId) {
    const link = document.createElement('link')
    link.rel = "prefetch"
    link.as = "script"
    link.href = Prefetcher.manifest[chunkId + '.js']
    document.head.appendChild(link)
  }
}

Przykład użycia:

const pageAImporter = {
  prefetch: () => import(/* prefetch: true */ './pageA.js')
  load: () => import(/* webpackChunkName: 'pageA' */ './pageA.js')
}

a.onmousehover = () => pageAImporter.prefetch()

a.onclick = () => pageAImporter.load().then(...)

Szczegółowy opis tej wtyczki można znaleźć tutaj:

Pobieranie wstępne - przejmij kontrolę z pakietu internetowego

Ponownie, jest to naprawdę hacking sposób i nie podoba mi się, jeśli chcesz, aby zespół webpack to zaimplementował, proszę zagłosuj tutaj:

Funkcja: pobranie dynamiczne importu na żądanie

Zakładając, że rozumiem, co próbujesz osiągnąć, chcesz przeanalizować i wykonać moduł po danym zdarzeniu (np. Kliknąć przycisk). Możesz po prostu umieścić instrukcję importu w tym zdarzeniu:

element.addEventListener('click', async () => {
  const module = await import("...");
});