Lors de la création d'applications Vue. à grande échelle, la taille du code augmente progressivement, ce qui peut affecter les performances et la vitesse de chargement de l'application. Afin d'optimiser les performances de chargement de l'application, Vue fournit une méthode pour configurer la stratégie de sous-packaging, qui permet de diviser le code en morceaux plus petits et de le charger à la demande, réduisant ainsi la taille du chargement initial. Dans cet article, nous apprendrons comment vue.config.jsconfigurer les politiques de sous-traitance dans un fichier, ainsi que quelques options de configuration courantes.
1. Qu’est-ce que la sous-traitance de code ?
Le sous-packaging de code est une méthode permettant de diviser le code d'une application en différents morceaux selon certaines règles et stratégies, puis de les charger si nécessaire. Cela peut aider à réduire la taille du fichier de chargement initial, augmentant ainsi la vitesse de chargement des pages. Vue fournit un moyen de configurer une stratégie de sous-traitance, vous permettant de diviser différents modules, bibliothèques et code chargé de manière asynchrone dans des fichiers séparés afin de mieux utiliser le mécanisme de mise en cache du navigateur.
2. Configurer la stratégie de sous-traitance
Dans le projet Vue, vous pouvez vue.config.jsconfigurer la stratégie de sous-traitance en modifiant le fichier. Voici un exemple de configuration simple :
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all',
},
},
},
},
},
};
Dans l'exemple ci-dessus, nous avons utilisé splitChunksl'option permettant de configurer la politique de sous-traitance. cacheGroupsObject permet de définir différents groupes de cache, chaque groupe représentant une règle de sous-traitance. Ici, nous créons un vendorgroupe de cache appelé qui fera correspondre node_modulesles modules et les regroupera dans un seul vendor.jsfichier.
3. Options de configuration de la sous-traitance
Lors de la configuration d'une politique de sous-traitance, plusieurs options courantes peuvent vous aider à mieux contrôler le comportement de sous-traitance :
test: Utilisé pour faire correspondre les modules qui doivent être divisés, vous pouvez utiliser des expressions régulières ou des fonctions.name: Spécifie le nom du fichier de sous-package généré, qui peut être une chaîne ou une fonction.chunks: Précisez à quels blocs la politique de sous-traitance s'applique, qui peuvent être'initial','async','all'etc.priority: Spécifiez la priorité du groupe de cache. Plus le nombre est grand, plus la priorité est élevée.minSizeetmaxSize: Préciser la plage de taille du sous-emballage. Les modules dépassant ou inférieurs à cette plage seront divisés.reuseExistingChunk: S'il faut réutiliser les sous-packages existants pour éviter les emballages répétés.
En ajustant ces options, vous pouvez optimiser votre stratégie de sous-packaging en fonction de vos besoins réels, ce qui entraîne de meilleures performances de chargement.
4. Exemple de sous-traitance 1
Cet exemple sous-traite le composant echart séparément.
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
// 将 echarts 单独分包
echarts: {
test: /[\\/]node_modules[\\/]echarts[\\/]/,
name: 'echarts',
chunks: 'all',
priority: 30,
},
// 默认分包配置
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
},
};
5. Deuxième exemple de sous-traitance
Cet exemple sous-traite tous les composants du dossier node_modules en fonction de leur taille. Si maxSize dépasse 300 Ko, la taille sous-traitée n'est pas inférieure au paramètre minSize de 100 Ko. C'est-à-dire que si le montant dépasse 300k, il sera sous-traité, et s'il est inférieur à 100k, il ne sera pas sous-traité.
module.exports = {
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace("@", "")}`;
},
chunks: "all",
enforce: true,
priority: 10,
minSize: 100000, // 100KB
maxSize: 300000,
reuseExistingChunk: true,
},
},
},
},
},
};
6. Résumé
Vue.js fournit des options de configuration de stratégie de sous-traitance flexibles, facilitant l'optimisation des performances de chargement de votre application. En configurant correctement votre stratégie de sous-traitance, vous pouvez diviser votre code en morceaux plus petits, accélérant ainsi le chargement des pages et améliorant l'expérience utilisateur. Dans les projets réels, la stratégie de sous-traitance est ajustée en fonction de la situation de l'application pour obtenir les meilleures performances et expérience utilisateur.