web-dev-qa-db-fra.com

WebPack et charge paresseuse pour une application Web à grande échelle

Fond

J'essaie de développer avec Webpack et JavaScript. WebPack enregistrerait tout le code source dans un seul fichier. Lorsque l'application devient grande, le fichier serait très important et entraînerait un impact négatif sur la performance.

WebPack

WebPack fourni une fonctionnalité nommée fractionnement de code qui scinderait la sortie du paquet en différents selon le point d'entrée prédéfini. Cela contribuerait à augmenter la performance si l'application devient trop grande. Cependant, il est nécessaire de restructurer l'application et de comprendre profondément l'application, puis l'application a craché dans différents modules qui constitueraient les points d'entrée pour la construction. En outre, cela nécessiterait un changement de code lorsqu'un autre requis pour appeler la fonction par chargement paresseux.

SystemJs

SystemJS est un chargeur de module ES dynamique qui serait paresseux charger le module requis en exécution.

Question

Devrais-je utiliser Webpack pour une application à grande vente?

Solution possible

Le groupement de code source JavaScript est nécessaire pour une application importante, mais l'application peut être soumise à des sous-modules et peut être une charge paresseuse dans l'application si le sous-module est chargé.

Mise à jour

Proposition étape Spécifique la syntaxe d'importation dynamique qui serait utilisée pour résoudre mon problème (charge paresseuse pour une partie spécifique).

import('./test.js').then(function(Test){
  var test = new Test.default();
  test.doSomething()
})

Qui est similaire à

import Test from './test';
var test = new Test();
test.doSomething();

support WebPack

Il est nécessaire de configurer le chemin public, le chunkfileName et ajouter la syntaxe-dynamic-importer pour activer la nouvelle syntaxe (importation ()).

const path = require('path');

module.exports = {
    entry: {
        app:    './src/app.js'
    },
    output: {
        publicPath: 'bin/',
        path: path.resolve(__dirname, 'bin'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['es2015'],
                            plugins: ["syntax-dynamic-import"]
                        }
                    }
                ]               
            }
        ]
    }
};
javascriptperformancebuildslazy-initializationwebpack
4
Ben Cheng

Tous les outils de chargement et de regroupement JavaScript matures, de Webpack à EXAMPYJS à SystemJS, fournissent des techniques pour ce faire.

Dans WebPack, il est activé par une fonctionnalité appelée fractionnement de code .

Dans SystemJs, il est activé par des fonctionnalités telles que l'arithmétique de paquets, la mise en cache de député et l'injection de paquet et est fournie par JSPM ou par une utilisation directe du constructeur SystemJS.

J'oublie la terminologie pour les exigences, mais la fonctionnalité existe aussi et est fournie par r.js.

Alors juste des recherches.

Mais pour répondre à votre question directe, tous ces outils, y compris la page Web, conviennent au développement de grandes applications. En fait, ils excellent dessus. Ma préférence personnelle n'est pas pour la page Web, mais plutôt pour JSPM.

En tant que notes Ben Cheng, l'approche de scission de code de Webpack vous oblige à structurer votre application en termes de points d'entrée différents, que vous pouvez découvrir moralement en tant que sous-packages ou sous-applications. Cela dit, cette technique de structuration joue un rôle dans la division des paquets dans tous ces outils.

Décomposer votre application dans ces autres unités plus indépendantes peut être une tâche difficile.

Disclaimer : Je suis membre de l'équipe JSPM

3
Aluan Haddad