Webpack - FullCalendarによる巨大なbundle.jsファイル

Question

私はFullcalendar & Moment.jsを使用してJSONデータを使用して簡単なインタラクティブなカレンダーを作成しています。 Webpack 2を使用してJSを1つのファイルにバンドルします。以下は私のwebpack.config.jsファイルの簡略化されたバージョンです（これ以上のものはすべてロードされています）。

var webpack = require('webpack'); 

var bower_dir = __dirname + '/library/bower_components'; 

var config = { 
    resolve: { 
     alias: { 
      jquery: bower_dir + '/jquery/src/jquery.js', 
      vue: bower_dir + '/vue/dist/vue.js', 
      fullCalendar: bower_dir + '/fullcalendar/dist/fullcalendar.js', 
      moment: bower_dir + '/moment/moment.js', 
     } 
    }, 

    entry: { 
     app: './library/js/main.js' 
    }, 

    output: { 
     path: __dirname + '/dist/library/js', 
     filename: "bundle.js" 
    }, 

    plugins: [ 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      Vue: 'vue' 
     }), 
    ], 

    module: { 
     noParse: /moment.js/ 
    } 

}; 

module.exports = config; 

私のバンドルファイルには、これらの両方が含まれた後にファイルサイズが大幅に増加していることに気付きました。私はMoment hereで同様の問題を読んで、私の非圧縮バンドルサイズを2.13MBから1.83MBに減らした変更を実装しました。

webpack --jsonからWebpack Visualiserまでの出力を実行すると、フルカレンダーはファイルサイズの膨大な割合を占めていることに気付きました。他のどのライブラリよりも多くのものがあります（23.7％、次に高いjQueryは15.8％、その後Vue.JSは15.4％）。

私はこのファイルサイズを減らす方法を知っている人がいらっしゃいますか？私は現在、webpack -pを稼動させて、656kBまでのサイズを減らしていますが、まだまだ多くのようです。

Answer 1

あなたはjQueryとFullcalendarの両方のためのCDNのバージョンを使用して検討していますか？まず第一に、それらはあなたのユーザのブラウザによってキャッシュされる可能性が高くなります（jQueryは多くのサイトがそれを使用するので確かです）。また、それらのライブラリのキャッシュはあなたの開発サイクルから独立していきます。ロードする。 FullcalendarとjQueryはバンドルに含まれているため、バンドルを変更するたびにユーザーはそれらのlibを再ダウンロードする必要があります。既存のCDNを使用すると、その問題が取り除かれます。

また、JS蒸留にbabelを使用している場合は、Webpack 2を試してみてください。tree-shakingという最小限のbabel設定を調整すると、バンドルのサイズも小さくなる可能性があります。

Answer 2

コンフィグ

entry: { 
    moment: bower_dir + '/moment/moment.js', 
    fullcalendar: bower_dir + '/fullcalendar/dist/fullcalendar.js', 
    app: './library/js/main.js' 
}, 
plugins: [ 
    new webpack.ProvidePlugin({ 
    $: 'jquery', 
    jQuery: 'jquery', 
    Vue: 'vue' 
    }), 
    new webpack.optimize.CommonsChunkPlugin({ 
    name: ['moment', 'fullcalendar', 'manifest'] 
    }) 
] 

どうしてもあなたのアプリケーションからこれらのライブラリの依存関係を提供する必要性が（代わりにCDNの）サーブと仮定すると、我々は、分割をコーディングし、私たちは共通のライブラリを分離していることを確認する必要がありますあなたのコードベース内に必要/インポートされます。

また、バンドルを小さくすることでファイルサイズを小さくすることもできますが、私はあなたがすでにその方法を知っていると仮定しています。