Maison > Article > interface Web > À 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
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'] } }]IntroductionEt dans webpack > effectuez le fractionnement du code et le chargement paresseux. Il n'y a pas besoin de chargeur et de require.ensure.
//全局组件 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é
É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!