À propos du fractionnement du code Vue et du chargement différé

Le chargement paresseux est également appelé chargement différé, ce qui signifie charger en cas de besoin et charger selon les besoins. Cet article vous présente principalement la méthode d'implémentation de la segmentation du code Vue et du chargement paresseux. L'article le présente de manière très détaillée à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous. Les amis qui en ont besoin suivront l'éditeur pour apprendre. Étudiez-le ensemble. J'espère que cela aide tout le monde.

Pourquoi le chargement paresseux est nécessaire

Dans une application d'une seule page, s'il n'y a pas de chargement paresseux d'application, le fichier fourni avec webpack sera anormalement volumineux, ce qui entraînera trop de contenu à charger lors de l'entrée sur la page d'accueil, s'il y en a trop, le délai est trop long, ce qui n'est pas propice à l'expérience utilisateur. L'utilisation du chargement paresseux peut diviser la page et la charger en cas de besoin, ce qui peut efficacement partager la pression de chargement sur la page d'accueil. et réduisez le temps de chargement de la page d'accueil

Comment coopérer avec webpack pour implémenter le chargement paresseux des composants

1 Configurez l'attribut chunkFilename dans le chemin de sortie dans le fichier de configuration du webpack

<.>

output: {
path: resolve(__dirname, 'dist'),
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
chunkFilename: 'chunk[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
},

Le chemin chunkFilename sera utilisé comme chemin pour le chargement paresseux des composants

2 Coopérer avec la méthode de chargement asynchrone prise en charge par webpack

• resolve =. > require([URL], solve), bon support

• () => system.import(URL), le site officiel de webpack2 a déclaré qu'il serait progressivement aboli et n'est pas recommandé

• () => import(URL), le site officiel de webpack2 recommande Use, appartient à la catégorie es7 et doit être utilisé avec le plug d'importation syntax-dynamique de babel. -in. L'utilisation spécifique est la suivante

npm install --save-dev babel-core babel-loader babel-plugin-syntax-dynamic-import babel-preset-es2015

use: [{
loader: 'babel-loader',
options: {
presets: [['es2015', {modules: false}]],
plugins: ['syntax-dynamic-import']
}
}]

Introduction

Et dans webpack > effectuez le fractionnement du code et le chargement paresseux. Il n'y a pas besoin de chargeur et de require.ensure.

l'importation résout tout.

Niveaux divisés

Le chargement paresseux divisé du code Vue comprend les niveaux suivants :

1. Chargement paresseux divisé au niveau du composant

2. Niveau de routage du routeur

3. Module Vuex

Répartition du code au niveau des composants

//全局组件
Vue.component('AsyncComponent', () => import('./AsyncComponent'))

//局部注册组件
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent')
 }
})

// 如果不是default导出的模块
new Vue({
 // ...
 components: {
 'AsyncComponent': () => import('./AsyncComponent').then({ AsyncComponent }) => AsyncComponent
 }
})

Répartition du code au niveau du routage

const AsyncComponent= () => import('./AsyncComponent')

new VueRouter({
 routes: [
 { path: '/test', component: AsyncComponent}
 ]
})

Découpage du code du module Vuex, il existe une méthode de module d'enregistrement dynamique dans vuex et importation

const store = new Vuex.Store()

import('./store/test').then(testModule => {
 store.registerModule('test', testModule)
})

Résumé

Dans les projets généraux , il nous suffit de diviser selon les niveaux du routeur et des composants (ou d'utiliser uniquement la division du routeur). Les grands projets peuvent utiliser les trois, mais l’utilisation est très simple, n’est-ce pas ?

Recommandations associées :

Étapes pour implémenter le chargement paresseux et l'implémentation inter-domaines à l'aide de Js

Introduction au chargement paresseux d'images à l'aide de JavaScript

Problème de chargement paresseux des images

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!