Sfondo

Sto cercando di sviluppare con Webpack e JavaScript. Webpack raggrupperebbe tutto il codice sorgente in un singolo file. Quando l'applicazione diventa grande, il file potrebbe essere molto grande e causare un impatto negativo sulle prestazioni.

Webpack

Funzionalità fornita dal pacchetto Web denominata suddivisione del codice che dividerebbe l'output del gruppo in diversi secondo il punto di ingresso predefinito. Aiuterà ad aumentare le prestazioni se l'applicazione diventa troppo grande. Tuttavia, ha richiesto di ristrutturare l'applicazione e comprendere a fondo l'applicazione, quindi l'applicazione spitted in diversi moduli che sarebbero i punti di ingresso per la compilazione. Inoltre, richiederebbe la modifica del codice quando un altro è obbligato a chiamare la funzione tramite il caricamento lento.

SystemJs

SystemJs è un caricatore di moduli Es dinamico che caricherà il modulo richiesto in runtime.

Domanda

Devo usare webpack per applicazioni di grande vendita?

Soluzione possibile

Il codice sorgente JavaScript Il raggruppamento è necessario per applicazioni di grandi dimensioni, ma l'applicazione può essere distribuita in sottomoduli e può essere lazy load nell'applicazione se il sottomodulo viene caricato.

Aggiorna

Proposta stage 3 specifica la sintassi di importazione dinamica che avrebbe usato per risolvere il mio problema (carico pigro per parte specifica).

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

Che è simile a

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

Supporto per il Webpack

Richiesto per configurare il percorso pubblico, chunkFilename e aggiungere syntax-dynamic-import per abilitare la nuova sintassi (import ()).

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"]
                        }
                    }
                ]               
            }
        ]
    }
};