1

基本的に空の最小限の index.js があります。

風船をサイズで使用するときconst $ = require('jquery')。index.js

const $ = require('jquery')私を使用しない場合index.jsは13kbです。

const $ = require('jquery')私の900+ index.jskbで

私が使用しているjqueryライブラリは250kbなので、それは私には意味がありません.

browserify / browserify-shim が原因で index.js のサイズが膨らむのはなぜですか?

これが私のpackage.jsonです：

"browser":{
    "jquery":"./libs/jquery-2.1.4.js"
},
"browserify-shim":{
    "jquery":"$"
},

ES6を使用しているため、gulpで変換babelifyも使用していることに注意してください。

私のgulpタスクには次のものがあります：

browserify({ entries: entry, debug: generateSourcemaps})
                .transform('babelify', {
                    sourceMaps: generateSourcemaps,
                    presets: ['babel-preset-es2015'],
                    compact: false
                })
                .transform('browserify-shim')
4

1 に答える 1

1

ソースマップが問題です。https://github.com/YPCrumble/balloon-SOに簡単なリポジトリを作成しました。ディレクトリを調べると、ソースマップがないとファイルが ~ 280kdistになることがわかりますが、ソースマップがあると ~760k になります。ソースマップは、jQuery などのライブラリをコードに組み合わせる場合にのみ、余分なサイズを追加します。

gulpfile を次のように変更します。

browserify({ entries: entry})
            .transform('babelify', {
                presets: ['babel-preset-es2015'],
                compact: false
            })
            .transform('browserify-shim')

...バンドルサイズを大幅に削減します。

于 2016-01-08T16:53:49.053 に答える