Comment optimiser WebPack / ES6 sur le dessus?

Je ne crois pas que votre timeline provient du code Minificateur (comparaison __ webpack_require __ code> dans les fichiers MAPED et f code> dans le code minificateur).

Je vais montrer que minifiez Et certains plugins peuvent réduire deux fois l'heure de fonctionnement de ce script. Dans WebPack Configs, je ne montrerai que la principale différence entre les configurations. p>

plugins: [
    'transform-react-remove-prop-types',
    'transform-react-constant-elements',
    'transform-react-inline-elements'
],
cache: false,
debug: false,
plugins: [
    // Search for equal or similar files and deduplicate them in the output
    // https://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
    new webpack.optimize.DedupePlugin(),

    // Minimize all JavaScript output of chunks
    // https://github.com/mishoo/UglifyJS2#compressor-options
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            screw_ie8: true, 
            warnings: false,
        },
    }),

    // A plugin for a more aggressive chunk merging strategy
    // https://webpack.github.io/docs/list-of-   plugins.html#aggressivemergingplugin
    new webpack.optimize.AggressiveMergingPlugin(),
]

Comme certains commentaires ont déjà signalé, nous devons différencier le temps de construction et d'exécution. Guide référencé à partir de la pagePACK Documents concerne Performances de construction Strong>.

Tout en n'utilisant que DEVTools comme des cartes de source et un code minificateur a une incidence sur la vitesse d'exécution, je pense que le plus important est chunking / loading paresseux strong> (comme Stus a déjà signalé). P>

Vous devez choisir quelles parties de votre application ne sont pas nécessaires pour le rendu initial. Ces pièces doivent être déplacées dans un autre morceau et chargé de manière paresseuse via exiger.enture () code>. P>

Habituellement, votre routeur est un endroit typique pour charger des trucs asynchroniquement: P>

function loadPage(page) {
    return (location, cb) =>
        require("./path/to/pages/" + page + ".jsx")(
            module => cb(null, module.default)
        );
}