Browserify與jQuery的墊片導致大的條目javascript。爲什麼？

Question

我有一個最基本的空index.js。

當我使用const $ = require('jquery') my index.js大小的氣球。

沒有使用const $ = require('jquery')我的index.js是13kb。

隨着const $ = require('jquery')我index.js 900 + KB

這是沒有意義的我，因爲我使用jQuery庫是250KB。

爲什麼我的index.js由於browserify/browserify-shim而變大？

這裏是我的package.json：

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

注意我也用我的一飲而盡變換babelify因爲我使用ES6。

我一飲而盡任務有以下幾點：

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

Answer 1

你sourcemaps是問題。我剛剛在https://github.com/YPCrumble/balloon-SO上創建了一個簡單的回購協議。查看dist目錄，你會發現，如果沒有源文件，你的文件將會達到280k，但是對於sourcemaps，它將達到〜760k。當您將像jQuery這樣的庫合併到您的代碼中時，Sourcemaps只會添加額外的大小。

改變你gulpfile到：

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

...將大大減少集束大小。