Je travaille récemment sur des travaux d'optimisation de site Web, et je commence à utiliser le fractionnement de code dans le webpack en utilisant une instruction d'importation comme celle-ci:
import(/* webpackChunkName: 'pageB-chunk' */ './pageB')
Qui créent correctement le pageB-chunk.js , disons maintenant que je veux précharger ce morceau dans la pageA, je peux le faire en ajoutant cette déclaration dans la pageA:
import(/* webpackChunkName: 'pageB-chunk' */ /* webpackPrefetch: true */ './pageB')
Ce qui se traduira par une
<link rel="prefetch" href="pageB-chunk.js">
étant ajouté à la tête de HTML, le navigateur le prélecture, jusqu'à présent tout va bien.
Le problème est que l' instruction d' importation que j'utilise ici non seulement prélecture du fichier js, mais évalue également le fichier js, signifie que le code de ce fichier js est analysé et compilé en bytecodes, le code de niveau supérieur de ce JS est exécuté.
C'est une opération qui prend beaucoup de temps sur un appareil mobile et je veux l'optimiser, je veux seulement la partie prefetch , je ne veux pas la partie évaluer et exécuter , parce que plus tard, lorsque certaines interactions utilisateur se produiront, je déclencherai l' analyse & m'évaluer
↑↑↑↑↑↑↑↑↑ Je veux seulement déclencher les deux premières étapes, les images proviennent de https://calendar.perfplanet.com/2011/lazy-evaluation-of-commonjs-modules/ ↑↑↑↑↑↑↑↑ ↑↑
Bien sûr, je peux le faire en ajoutant moi-même le lien de prélecture, mais cela signifie que je dois savoir quelle URL je dois mettre dans le lien de prélecture, webpack connaît définitivement cette URL, comment puis-je l'obtenir à partir de webpack?
Webpack a-t-il un moyen simple d'y parvenir?
la source
if (false) import(…)
- Je doute que webpack fasse une analyse de code mort?import
code dynamique devrait aller.Réponses:
MISE À JOUR
Vous pouvez utiliser preload-webpack-plugin avec html-webpack-plugin, il vous permettra de définir quoi précharger dans la configuration et il insérera automatiquement des balises pour précharger votre bloc
notez que si vous utilisez webpack v4 à partir de maintenant, vous devrez installer ce plugin en utilisant
preload-webpack-plugin@next
exemple
MISE À JOUR 2
si vous ne voulez pas précharger tous les morceaux asynchrones, mais seulement une fois que vous pouvez le faire aussi
soit vous pouvez utiliser le plugin babel de migcoder ou
preload-webpack-plugin
comme suitvous devrez d'abord nommer ce morceau asynchrone à l'aide d'un
webpack magic comment
exemplepuis dans la configuration du plugin, utilisez ce nom comme
Voyons tout d'abord le comportement du navigateur lorsque nous spécifions
script
balise ou unelink
balise pour charger le scriptscript
balise, il la charge, l'analyse et l'exécute immédiatementasync
etdefer
tag uniquement jusqu'à l'DOMContentLoaded
événementlink
)maintenant, il existe une autre méthode de hackey non recommandée: expédiez l'intégralité de votre script et
string
oucomment
(car le temps d'évaluation du commentaire ou de la chaîne est presque négligeable) et lorsque vous devez l'exécuter, vous pouvez utiliserFunction() constructor
oueval
deux ne sont pas recommandésUne autre approche des travailleurs du service: (cela préservera votre événement de cache après le rechargement de la page ou l'utilisateur se déconnecte après le chargement du cache)
Dans un navigateur moderne, vous pouvez utiliser
service worker
pour récupérer et mettre en cache un recours (JavaScript, image, css quoi que ce soit) et lorsque le thread principal demande ce recours, vous pouvez intercepter cette demande et renvoyer le recours du cache de cette façon, vous n'analysez pas et n'évaluez pas le script lorsque vous le chargez dans le cache en savoir plus sur les travailleurs des services iciexemple
comme vous pouvez le voir, cela ne dépend pas du webpack , cela est hors de portée du webpack, mais avec l'aide de webpack, vous pouvez fractionner votre bundle, ce qui aidera à mieux utiliser le service worker
la source
Mises à jour: j'inclus toutes les choses dans un package npm, vérifiez-le! https://www.npmjs.com/package/webpack-prefetcher
Après quelques jours de recherche, je finis par écrire un plugin babel personnalisé ...
En bref, le plugin fonctionne comme ceci:
Prefetcher est une classe d'assistance qui contient le manifeste de la sortie du webpack et peut nous aider à insérer le lien de prélecture:
Un exemple d'utilisation:
Le détail de ce plugin peut être trouvé ici:
Prefetch - Prenez le contrôle du webpack
Encore une fois, c'est une manière vraiment hacky et je n'aime pas ça, si vous voulez que l'équipe webpack implémente cela, veuillez voter ici:
Fonctionnalité: prélecture importation dynamique à la demande
la source
En supposant que j'ai compris ce que vous essayez de réaliser, vous voulez analyser et exécuter un module après un événement donné (par exemple, cliquez sur un bouton). Vous pouvez simplement placer l'instruction import dans cet événement:
la source