Webpack出力 - 出力をチャンクにスライスする方法はありますか？

Question

私はwebpackを初めて使いました。require/importを使用して複数のスクリプトタグをindex.htmlに追加する利点が大好きです。

しかし、13MB出力ファイルをチャンクにスライスする方法があるかどうか疑問に思うので、スクリプトアプローチのようにブラウザのキャッシュのメリットを得ることができます。例えば

：

• bundle.react.components.jsの
• bundle.utils.js
• bundle.redux.reducers.js

こうロード時間小さな変更を加えるとアプリケーションが速くなります。bundle.utils.jsにのみ影響します。

乾杯、

Answer 1

// your slicing gulp file 
var gulp = require('gulp') 
var webpackStream = require('webpack-stream') 
var path = require('path') 
var webpack = require('webpack') 

gulp.task('slice', function() { 
    return gulp.src('') 
     .pipe(webpackStream({ 
      entry: { 
       react_1st: ["react", "react-dom"], 
       utils_2nd: [ 
         "fixed-data-table" 
        , "./class_1" 
        , "./class_2" 
        , "./constants" ], 
       remainder_3rd: "./render_component.js" // ReactDOM.render(your_component ... 
      }, 
      output: { 
       path: path.join(__dirname, "js"), 
       filename: "bundle.[name].js", 
      }, 
      plugins: [ 
       new webpack.optimize.CommonsChunkPlugin({ 
        names: ["remainder_3rd", "utils_2nd", "react_1st"], 
        minChunks: Infinity 
       }), 
      ] 
     })) 
    .pipe(gulp.dest('./')) 
}) 

<script src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script> 
<script src="bundle.react_1st.js"></script> 
<script src="bundle.utils_2nd.js"></script> 
<script src="bundle.remainder_3rd.js"></script>