Code Splitting de Webpack implémente le chargement à la demande

1. Qu'est-ce que le fractionnement de code?

Lors de l'utilisation de Webpack au tout début, tous les fichiers js étaient regroupés dans un seul build.jsfichier (le nom du fichier dépend du webpack.config.jsfichier output.filename), mais dans les grands projets, il build.jspeut être trop volumineux, ce qui entraîne un temps de chargement de la page trop long. À ce stade il est nécessaire code splitting, code splittingest de diviser le fichier en blocs (chunk), nous pouvons définir le point de partage (split point), le fichier est divisé en blocs en fonction du point de partage, et réaliser un chargement à la demande.

2. Que fait le fractionnement de code?

La bibliothèque de classes tierce est emballée séparément: étant
donné que le contenu de la bibliothèque de classes tierce ne changera fondamentalement pas, il peut être séparé du code métier, de sorte que le mécanisme de mise en cache du navigateur puisse être maximisé pour réduire les demandes.
Chargement à la demande:
Webpack prend en charge la définition de points de partage, via un require.ensurechargement à la demande.

3. Comment effectuer le fractionnement de code?

Le code suivant est un document de présentation généré à partir vue-clidu webpack-simplemodèle

//cmd
vue init webpack-simple code_spliting_demo

(1) La bibliothèque tierce est emballée séparément

Nous supposons que la jquery.jssomme est introduite dans le projet respond.js, puis nous pouvons webpack.config.jsconfigurer plusieurs entrées pour empaqueter ces deux bibliothèques tierces séparément.

Dans webpack.config.jsconfigurer

//webpack.config.js

//在entry中添加相应第三方类库
entry: {
    bundle: './src/main.js',
    vendor: ['./src/lib/jquery-1.10.2.min.js', './src/lib/respond.min.js']
}
  
 //在plugins中添加CommonChunkPlugin
plugins:[
    new webpack.optimize.CommonsChunkPlugin({ 
        name: 'vendor',  
        filename: 'vendor.bundle.js'  
    })
]

Exécutez npm run build, à ce moment, distdeux fichiers sont générés dans le répertoire, à savoir build.jsetvendor.bundle.js

Fichiers générés après npm run build

index.htmlIntroduit en, Note: Avant vendor.bundle.jsd' build.jsintroduire

//index.html

<script src="/dist/vendor.bundle.js"></script>
<script src="/dist/build.js"></script>

(2) Charge sur demande

Nous pouvons le routerconfigurer pour implémenter le chargement à la demande des composants. Lorsque certains fichiers de composant unique sont volumineux, utilisez le chargement à la demande pour réduire build.jsle volume et optimiser la vitesse de chargement (si la taille du composant est petite, le chargement à la demande sera Ajouter un supplément http请求, au contraire augmente le temps de chargement)

Ici, nous ajoutons trois composantes, à savoir A.vue, B.vue,C.vue

//A.vue
<template>
    <h1>这里是A.vue组件</h1>
</template>

//B.vue
<template>
    <h1>这里是B.vue组件</h1>
</template>

//C.vue
<template>
    <h1>这里是C.vue组件</h1>
</template>

Configurer dans le routage (note: ici pour plus de commodité, c'est app.jsla route ajoutée, dans le projet réel, la route doit être extraite séparément)

//app.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//AMD规范的异步载入
const ComA = resolve => require(['./components/A.vue' ], resolve);
const ComB = resolve => require(['./components/B.vue' ], resolve);
const ComC = resolve => require(['./components/C.vue' ], resolve);

const router = new VueRouter({
  routes: [
    {
      name: 'component-A',
      path: '/a',
      component: ComA
    },
    {
      name: 'component-B',
      path: '/b',
      component: ComB
    },
    {
      name: 'component-C',
      path: '/c',
      component: ComC
    }
  ]
})

new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
})

Dans la webpack.config.jsconfiguration de output.chunkFilename,

//webpack.config.js

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js',
    //添加chundkFilename
    chunkFilename: '[name].[chunkhash:5].chunk.js'
}

Exécution npm run build, cette fois distle fichier répertoire créé sous les cinq, les trois fichiers supplémentaires qui correspondent aux A.vue, B.vue, C.vueces trois composantes

Fichiers générés après la construction de l'exécution de npm

Chargement asynchrone de spécification CMD

Juste au moment de l'introduction du routage à l'aide du AMD规范chargement asynchrone. webpackFournit require.ensure()la méthode pour obtenir CMD规范un chargement asynchrone. C'est également webpackla méthode recommandée pour charger. Pour en savoir plus ensure, cliquez sur "Webpack assurez-vous que la séparation semble toujours ne pas comprendre le code ,Tu m'as frappé"

Le code suivant consiste à utiliser la require.ensure()méthode pour configurer le routage

//app.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

//AMD风格的异步加载
// const ComA = resolve => require(['./components/A.vue' ], resolve);
// const ComB = resolve => require(['./components/B.vue' ], resolve);
// const ComC = resolve => require(['./components/C.vue' ], resolve);

//CMD风格的异步加载
const ComA = resolve => require.ensure([], () => resolve(require('./components/A.vue')));
const ComB = resolve => require.ensure([], () => resolve(require('./components/B.vue')));
const ComC = resolve => require.ensure([], () => resolve(require('./components/C.vue')));

const router = new VueRouter({
  routes: [
    {
      name: 'component-A',
      path: '/a',
      component: ComA
    },
    {
      name: 'component-B',
      path: '/b',
      component: ComB
    },
    {
      name: 'component-C',
      path: '/c',
      component: ComC
    }
  ]
})

new Vue({
  el: '#app',
  router: router,
  render: h => h(App)
})

Après exécution npm run build, dist5 fichiers sont également générés dans le répertoire
Fichiers générés après la construction de l'exécution de npm

Démo d'effet de chargement à la demande:
Démo de l'effet de chargement à la demande

Auteur: Tong Li Hui
lien: https: //www.jianshu.com/p/b3b8fb8a2336
Source: Les livres de Jane
sont protégés par le droit d'auteur de l'auteur. Pour les réimpressions commerciales, veuillez contacter l'auteur pour l'autorisation. Pour les réimpressions non commerciales, veuillez indiquer la source.