À 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
},

• 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']
}
}]

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

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

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

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

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

const store = new Vuex.Store()

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

É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!