[Compilation et partage] Quelques questions d'entretien webpack (avec analyse des réponses)

Parlez de votre compréhension de Webpack

1.

webpack est un bundler de modules statiques. Lorsque webpack traite une application, il crée de manière récursive un graphe de dépendances qui contient tous les modules dont l'application a besoin, puis regroupe ces modules dans un ou plusieurs bundles.

Webpack est comme une ligne de production. Il doit passer par une série de processus de traitement (chargeurs) avant que les fichiers sources puissent être convertis en résultats de sortie. Chaque processus de traitement sur cette ligne de production a une responsabilité unique et il existe des dépendances entre plusieurs processus. Ce n'est qu'une fois le traitement en cours terminé qu'il peut être transmis au processus suivant pour traitement.
Un plug-in est comme une fonction insérée dans la ligne de production, qui traite les ressources de la ligne de production à un instant précis. Webpack diffusera les événements pendant le processus en cours. Le plug-in n'a besoin que d'écouter les événements qui l'intéressent et peut rejoindre la ligne de production pour modifier le fonctionnement de la ligne de production.

2. Pouvez-vous parler du processus d'emballage/processus de construction
3.Pouvez-vous parler de l'optimisation des opérations frontales

Processus d'emballage/principe d'emballage/processus de construction de Webpack ?

Le processus en cours d'exécution de webpack est un processus en série, et son flux de travail consiste à connecter divers plug-ins en série.

L'exécution en ligne de commande de la commande d'empaquetage npx webpack démarrenpx webpack打包命令开始
1.初始化编译参数:从配置文件和shell命令中读取与合并参数
2.开始编译:根据上一步得到的参数初始化Compiler对象，加载所有配置的Plugin，执行对象的 run 方法开始执行编译。
3.确定入口:根据配置中的 entry 找出所有的入口文件
4.编译模块:从入口文件触发，调用所有配置的Loader对模块进行翻译，再找出该模块依赖的模块，然后递归本步骤直到所有入口依赖的文件都进行翻译。
5.完成模块编译:在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系图。
6.输出资源：根据依赖关系图，组装成一个个包含多个模块的Chunk，再把每个Chunk转化成一个单独的文件加入到输出列表，根据配置确定输出的路径和文件名，输出。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑。

总结

• 初始化:从配置文件和shell命令中读取与合并参数，根据参数初始化Compiler实例，加载Plugin(注册所有配置的插件)，调用Compiler实例的run方法开始执行编译。

Compiler编译对象掌控者webpack生命周期，不执行具体的任务，只是进行一些调度工作。比如执行模块创建、依赖收集、分块、打包等
调用run之后，创建Compiltation实例，每次构建都会新创建一个Compiltation实例，包含了这次构建的基本信息
Webpack 1.Initialiser les paramètres de compilation : lire et fusionner les paramètres des fichiers de configuration et des commandes shell

2.Démarrer la compilation  : Initialisez l'objet Compiler selon les paramètres obtenus à l'étape précédente, chargez tous les plugins configurés et exécutez la méthode run de l'objet pour démarrer la compilation.

3. Déterminer l'entrée : Rechercher tous les fichiers d'entrée en fonction de l'entrée dans la configuration

4. Module de compilation : Déclenché à partir du fichier d'entrée, appeler tous les Loaders configurés pour exécuter le module Translate, puis recherchez les modules dont dépend le module, puis répétez cette étape jusqu'à ce que tous les fichiers dépendants de l'entrée soient traduits.
• 5. Compilation complète des modules : Après avoir utilisé Loader pour traduire tous les modules à l'étape 4, le contenu final traduit de chaque module et le diagramme de dépendances entre eux sont obtenus.
6. Ressources de sortie : selon le graphe de dépendances, assemblez-les en morceaux contenant plusieurs modules, puis convertissez chaque morceau en un fichier séparé et ajoutez-le à la liste de sortie, et déterminez la sortie en fonction de la configuration. Chemin et nom du fichier, sortie.

Dans le processus ci-dessus, Webpack diffusera des événements spécifiques à des moments précis, et le plug-in exécutera une logique spécifique après avoir écouté les événements qui l'intéressent.

Résumé

Initialisation : Lire et fusionner les paramètres des fichiers de configuration et des commandes shell, initialiser l'instance du compilateur en fonction des paramètres, charger le plugin (enregistrer tous les plug-ins configurés), appeler la méthode d'exécution de l'instance du compilateur pour commencer la compilation.

L'objet de compilation du compilateur contrôle le cycle de vie du webpack. Il n'effectue pas de tâches spécifiques, mais effectue uniquement un travail de planification. Par exemple, effectuez la création de modules, la collecte de dépendances, le chunking, l'empaquetage, etc.

Après avoir appelé run, créez une instance de compilation créera une nouvelle instance de compilation, qui contient les informations de base de cette build Webpackcode> diffusera des événements spécifiques à des moments précis et le plug-in exécutera une logique spécifique après avoir écouté les événements qui vous intéressent.

Compilation : déclenchée dès l'entrée, chaque module est appelé en série au chargeur correspondant pour traduire le module, puis les modules dont dépend le module sont trouvés et compilés de manière récursive.

Commencez à analyser le fichier pour construire l'arborescence de syntaxe AST à partir de l'entrée spécifiée dans le fichier de configuration (webpack.config.js)

Selon le graphe de dépendances, assemblez-le en un morceau contenant plusieurs modules et convertissez chacun Découpez-le dans la sortie du fichier. Différentes entrées génèrent différents morceaux, et l'importation dynamique générera également son propre morceau

Quel est le rôle du chargeur dans Webpack/Qu'est-ce que le chargeur ?

🎜Loader est un mécanisme fourni dans 🎜webpack pour gérer plusieurs formats de fichiers🎜 Parce que webpack ne connaît que JS et JSON, Loader est équivalent à un traducteur, prétraitant d'autres types de ressources. 🎜 Utilisé pour convertir le "code source" du module. 🎜 Le chargeur prend en charge les appels en chaîne et l'ordre des appels est de droite à gauche. **Chaque chargeur de la chaîne traitera les ressources qui ont été traitées auparavant et deviendra finalement du code js. 🎜 Vous pouvez fournir plus de fonctionnalités à l'écosystème JavaScript grâce aux fonctions de prétraitement du chargeur. 🎜🎜🎜🎜🎜Quels sont les chargeurs courants ? 🎜🎜🎜🎜less-loader : compilez moins de fichiers en fichiers CSS🎜🎜🎜🎜Pendant le développement, nous utilisons souvent moins de préprocesseurs pour écrire des styles CSS afin d'améliorer l'efficacité du développement🎜

• css-loader : Transformez le fichier css en module commonjs et chargez-le dans js. Le contenu du module est une chaîne de style
• style-loader : Créez une balise de style, insérez la ressource de style en js dans le. tag, et ajoutez la balise à Effective dans head
• ts-loader : Empaqueter et compiler des fichiers Typescript

Quel est le rôle du plugin ? Qu'est-ce que /Plugin

Le plugin est plus puissant et son objectif principal est de résoudre des problèmes qui ne peuvent pas être réalisés par le chargeur, comme l'optimisation du packaging et la compression du code.
Une fois le plugin chargé, les fonctions définies par le plugin seront déclenchées à un certain moment lors de la construction du webpack pour aider webpack à faire quelque chose. Implémentez des extensions fonctionnelles pour webpack.

Quels sont les plugins courants ?

• html-webpack-plugin traite les ressources HTML Par défaut, il créera un HTML vide et importera automatiquement toutes les ressources (js/css) pour la sortie d'empaquetage. -css-extract -plugin Le CSS empaqueté est dans le fichier js. Ce plug-in peut extraire le CSS séparément
• clean-webpack-plugin Chaque fois que vous emballez, le plug-in CleanWebpackPlugin supprimera automatiquement le dernier package
.

Webpack Ordre d'exécution des plugins (mécanisme de chargement) ?

La différence entre Loader et Plugin dans Webpack

Je dis toujours que Webpack est comme une ligne de production. Il doit passer par une série de processus de traitement (loader) avant que le fichier source puisse être converti en sortie. résultat. Chaque processus de traitement sur cette ligne de production a une responsabilité unique, et il existe des dépendances entre plusieurs processus seulement une fois le traitement en cours terminé, il peut être transmis au processus suivant pour traitement.

Un plug-in est comme une fonction insérée dans la ligne de production, qui traite les ressources de la ligne de production à un instant précis. Webpack diffusera les événements pendant le processus en cours. Le plug-in n'a besoin que d'écouter les événements qui l'intéressent et peut rejoindre cette ligne de production pour modifier le fonctionnement de la ligne de production.
Ou utilisez le résumé précédent pour parler de ce que sont respectivement Loader et Plugin

Durée d'exécution

1. Loader s'exécute dans la phase de compilation

2. Les plugins fonctionnent dans tout le cycle


Utilisation

Loader :1. Télécharger 2. Utiliser

Plugin : 1. Télécharger 2. Citer 3. Utiliser

Quelles méthodes d'optimisation Webpack a-t-il utilisées ? Quelles sont les méthodes d’optimisation ?

Comment utiliser webpack pour optimiser les performances front-end ? La question concerne l'optimisation de l'environnement de production Comment améliorer la vitesse de construction du webpack ? La question concerne l'optimisation de la vitesse de construction

tree-shaking supprime le code inutilisé pour optimiser les performances frontales/augmenter la vitesse de construction

tree-shaking est un packaging technologique Dead Code Elimination basé sur la spécification du module ES. Pendant le processus de packaging Détectez et marquez les modules qui n'ont pas été référencés dans le projet, supprimez les modules qui n'ont pas été référencés, améliorez la vitesse de construction et réduisez le temps d'exécution du programme.

À quoi devez-vous faire attention lorsque vous utilisez le tremblement d'arbre ?

1. Fonction par défaut. 2. Vous devez utiliser les spécifications ES6 pour écrire le code du module. Les dépendances du module ES6 sont déterministes et n'ont rien à voir avec l'état d'exécution

3. Essayez de ne pas écrire de code avec des effets secondaires. Par exemple, vous avez écrit une fonction d'exécution immédiate, utilisé des variables externes dans la fonction, etc.

mode = production ，生产环境默认开启tree-shaking
À propos des effets secondaires

Comment utiliser webpack pour optimiser les performances front-end ?

Compression du code

• Chargement à la demande

Code split splitChunks - configuré dans l'élément de configuration d'optimisation

• 1. Vous pouvez empaqueter le code dans node__mudules séparément dans une sortie de bloc (par exemple, en utilisant jqury ? )
2. Il analysera automatiquement s'il y a des fichiers publics dans le bloc à entrées multiples. S'il y en a, il sera regroupé dans un bloc séparé et ne sera pas regroupé à plusieurs reprises.

Utilisez Dll pour le sous. -packaging

• Normalement, node_module sera empaqueté dans un fichier
Utilisez la technologie dll pour empaqueter les frameworks et les bibliothèques qui ne sont pas fréquemment mis à jour séparément et générer un morceau

Utilisez le routage pour un chargement paresseux

• Toutes les références dans le Le code référencé par la fonction import() Les modules seront regroupés dans un package séparé et placés dans le répertoire où le morceau est stocké. Lorsque le navigateur exécute cette ligne de code, il demandera automatiquement cette ressource et implémentera un chargement asynchrone.

Comment configurer le code de compression dans Webpack ? Qu'est-ce qui est compressé ?

1. Configurez le plug-in comme compresseur pour la compression dans l'élément de configuration d'optimisation. 2. Utilisez ce plug-in pour la compression dans les plugins

Compression js : en utilisant terser-webpack-plugin

Compression css : en utilisant le plug-in optimise-css-assets-webpack-plugin
Supprimer la console, les commentaires , Espaces, sauts de ligne, codes CSS inutilisés, etc.

Comment améliorer la vitesse de création d'un webpack ?

Idée 1 : Réduisez les fichiers ou les codes qui doivent être construits

• HMR (Hot Module Remplacement) Le remplacement à chaud du module ne reconstruit que les modules modifiés - dans l'environnement de développement
• Rétrécissez la portée du traitement : faites un usage raisonnable de ceux-ci deux attributs excluent : Les fichiers et incluent qui n'ont pas besoin d'être traités : Les fichiers qui doivent être traités
• Lorsque le cache babel est construit pour la deuxième fois, le cache précédent sera lu et seuls les fichiers modifiés seront reconstruits
• Utiliser Dll pour le sous-packaging ---> Un sous-packaging pratique doit être chargé

Normalement, node_module sera emballé dans un fichier
À l'aide de la technologie DLL, les frameworks et les bibliothèques qui ne sont pas fréquemment mis à jour peuvent être emballés séparément pour générer un chunk
Le code source du projet doit également être divisé et peut être basé sur Route pour diviser les fichiers packagés--> Comment implémenter le chargement paresseux des routes ? Comment implémenter le chargement asynchrone des composants dans webpack ?

Idée 2 : Faites plus de construction

• Chargeur de threads d'emballage multi-processus, placez-le avant le chargeur qui prend beaucoup de temps

Il y a des frais généraux dans le démarrage du processus et la communication du processus, et le temps de travail est relativement long, plusieurs processus sont donc nécessaires Emballage

【Recommandations associées : Tutoriel vidéo javascript, Vidéo de programmation】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!