gulp - gulp を使用した巨大なバンドル

Question

誰かがこれについて頭を包むのを手伝ってくれたらとてもありがたいです. 反応するプロジェクトが組み込まれています。gulp を使用してバンドルを構築します。しかし、私のバンドルはそれぞれ 10Mb を超えてしまいます。そしてcss 2Mb。ページをリロードするたびに、22Mb のデータをダウンロードします。ばかげています。私は環境をセットアップしておらず、gulp/browserify/npm などを使ったことがありません。私たちの主任プログラマーは約 6 週間前に退職し、現在はサイトを公開していますが、読み込み時間を改善する必要があります。

私自身のコードは約 900 kb です。私のcssは約137kbです。私は3つのバンドルを持っています。

vendor-bundle.js には、/assets/libs/index.js に次のものが含まれており、最大 10Mb 追加されます。各インクルードの後、サイズがあります。セマンティックはどのように6Mbにすることができますか??? 私は何を間違っていますか？

window.React = require('react'); (3 Mb)
require('jquery');               (1.7 Mb)
require('underscore');           (138 kb)
require('fastclick');            (72 kb)
require('semantic');             (6.7 Mb)
require('./markerclusterer');    (116 kb)
require('./stickyfill.min');     (30 kb)

app-bundle と account-bundle は同じサイズで、それぞれ約 11Mb です。ログイン/サインアップ ページには account-bundle がロードされ、メイン サイトには app-bundle がロードされます。私自身のコードはわずか 970 kb です。バンドルを最大 11 MB まで追加するにはどうすればよいですか???

module.exports = {
    sass: {
        base_file: src + "/assets/css/main.scss",
        src: src + "/assets/css/**/*.{sass,scss}",
        dest: dest + "/css",
        dest2: dest2 + "/css",
        settings: {
            indentedSyntax: true,
            imagePath: 'images'
        }
    },
    images: {
        src: src + "/assets/images/**",
        dest: dest + "/images",
        dest2: dest2 + "/images"
    },
    fonts: {
        src: src + '/assets/fonts/**',
        dest: dest + '/fonts',
        dest2: dest2 + "/fonts"
    },
    js: {
        src: src + '/app/**/*.js',
        dest: dest + 'js'
    },
    browserify: { // A separate bundle will be generated for each bundle config in this list
        bundleConfigs: [{
            entries:    src  + '/assets/libs/index.js',
            dest:       dest + '/js',
            dest2:      dest2 + '/js',
            mapName:    'vendor.map.json',
            outputName: 'vendor-bundle.js',
            require:    [ 'jquery', 'underscore' , 'fastclick' , 'semantic' ]
        },{
            entries:    src + '/app/app.account.js', 
            dest:       dest + '/js',
            dest2:      dest2 + '/js',
            mapName:   'account.map,json',
            outputName: 'account-bundle.js',
            //list of externally available modules to exclude from the bundle
            external: [ 'jquery', 'underscore', 'lodash' , 'fastclick' , 'semantic' , '/app/app.main.js']
        },{
            entries: src + '/app/app.main.js', 
            dest: dest   + '/js',
            dest2:      dest2 + '/js',
            mapName:   'app.map,json',
            outputName:  'app-bundle.js',
            //list of externally available modules to exclude from the bundle
            external: [ 'jquery', 'underscore', 'lodash', 'fastclick' , 'semantic' ]
        }]
    },
    production: {
        cssSrc: dest + '/css/*.css',
        jsSrc:  dest + '/js/*.js',
        dest:   dest
    }
};

また、バンドルを削除する方法を習得したら、それらを最も簡単に圧縮してすべてのコメントを削除するにはどうすればよいですか?

かなりの時間をオンラインで調べましたが、もう時間がありません。ありがとうございました