Wie die bundle.js Datei zu chunken?

Ich habe ein Projekt mit react und flux Architektur erstellt. Sie müssen die Datei bundle.js aufteilen, da durch das Kombinieren aller Dateien eine riesige js-Datei mit 4 MB erstellt wird, die beim Herunterladen auf einem langsamen Netzwerk Probleme verursacht, so dass die js-Datei so aufgeteilt wird, dass nur die erforderlichen Bibliotheken bei einer Seite enthalten sind öffnet ich bin mit webpack 1.xWie die bundle.js Datei zu chunken?

meine Verzeichnisstruktur ist

webpack.config.js

var path = require('path'); 
 
var webpack = require('webpack'); 
 

 
module.exports = { 
 
    devtool: 'cheap-module-source-map', 
 
    entry: [ 
 
    './src/index' 
 
    ], 
 
    output: { 
 
    path: path.join(__dirname, 'dist'), 
 
    filename: 'bundle.js', 
 
    publicPath: '' 
 
    }, 
 
    plugins: [ 
 
    new webpack.HotModuleReplacementPlugin(), 
 
    new webpack.optimize.CommonsChunkPlugin({ 
 
     // names: ["app", "subPageA"] 
 
     // (choose the chunks, or omit for all chunks) 
 

 
     children: true, 
 
     // (use all children of the chunk) 
 

 
     async: true, 
 
     // (create an async commons chunk) 
 

 
     // minChunks: 3, 
 
     // (3 children must share the module before it's separated) 
 
    }) 
 
    ], 
 
    module: { 
 
    loaders: [{ 
 
     test: /\.js$/, 
 
     loaders: ['react-hot', 'babel'], 
 
     include: path.join(__dirname, 'src') 
 
    }, { 
 
     test: /\.css$/, 
 
     exclude: /\.useable\.css$/, 
 
     loader: "style-loader!css-loader" 
 
    }, { 
 
     test: /\.useable\.css$/, 
 
     loader: "style-loader/useable!css-loader" 
 
    }, { 
 
     test: /\.png$/, 
 
     loaders: ["url-loader?mimetype=image/png"] 
 
    }, { 
 
     test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
 
     loader: 'url-loader?limit=100000' 
 
    }] 
 
    } 
 
};

Datei

server.js Datei

var webpack = require('webpack'); 
 
var WebpackDevServer = require('webpack-dev-server'); 
 
var config = require('./webpack.config'); 
 

 
new WebpackDevServer(webpack(config), { 
 
    publicPath: config.output.publicPath, 
 
    hot: true, 
 
    historyApiFallback: true 
 
}).listen(3000, 'localhost', function(err, result) { 
 
    if (err) { 
 
     return console.log(err); 
 
    } 
 

 
    console.log('Listening at http://localhost:3000/'); 
 
});

Datei index.html

<html> 
 

 
<head> 
 
    <title>Project</title> 
 
</head> 
 

 
<body> 
 
    <div id="app" /> 
 
    <script src="bundle.js" type="text/javascript"></script> 
 
</body> 
 

 
</html>

Quelle

2017-03-17 Gagan

Wenn Sie ein bestimmtes Modul benötigen, das nicht auf die Anfangslast erforderlich ist, Sie kann

verwenden

Auf diese Weise wird es nur geladen, wenn Sie es brauchen, und damit Ihre Bündelgröße verringern.

Wenn Sie Routen nutzen und reagieren-Router, den Sie pro Route Code Aufspaltung in diesem Artikel beschriebenen http://moduscreate.com/code-splitting-for-react-router-with-es6-imports/

Quelle

2017-03-17 07:24:46 sergeysmolin

können Sie ein Beispiel mit meinem Code geben – Gagan

Ihr Code zeigt keine js Ihrer Anwendung, um Vorschläge zu machen. Häufige Anwendungsfälle für das Teilen von Code sind jedoch, wenn Sie den Inhalt "unterhalb des Falzes" scrollen, sodass Sie einen Inhalt unterhalb des Falzes innerhalb der Anforderung angeben. Oder wenn ein Benutzer auf eine Schaltfläche klickt und eine Komponente mit ihrer großen Logik auf dem Bildschirm erscheint. In React, obwohl Sie normalerweise Code-Splitting mit Reagieren Router-Splitting behandeln. Sie können aber auch Bibliotheken von Drittanbietern laden, indem Sie sicherstellen. – sergeysmolin

Im meiner Erfahrung, in der Regel mit webpack-optimize-Klotz-Plugin verwenden können, teilen Sie Ihre Projekte Code in ein vendor.js und ein bundle.js. wie folgt:

module.exports = { 
    entry:{ 
     vendor: ["react", "react-dom"], // list all vender libraries here 
     app: ['./path/to/entry.js'] 
    }, 
    output: { 
     path: path.join(__dirname, './public'), 
     filename:'bundle.js' 
    }, 
    plugins: [ 
     new webpack.optimize.OccurenceOrderPlugin(), 
     new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js") 
    ] 
}

Also würde dies eine bundle.js und eine vendor.js ausgeben. Ich habe webpack-optimize-chunk-plugin nicht in der von Ihnen beschriebenen Weise verwendet. (es wäre sehr cool wenn möglich).

Auch ich würde alle anderen Webpack-Optimierung Plug-ins auschecken, um auch mit der gesamten Dateigröße zu helfen. (d. h. DedupePlugin, UglifyJsPlugin, OccurcenceOrderPlugin ...). Weitere Informationen here. Auch here ist ein Beispiel für Multi-Einstiegspunkt, die Sie hilfreich finden können. Viel Glück.

Quelle

2017-03-17 13:29:09

Wie die bundle.js Datei zu chunken?

Antwort

Verwandte Themen