Обзор шим с JQuery приводит к большой записи JavaScript. Зачем?

Question

У меня есть минимальный index.js, который по существу пуст.

когда я использую const $ = require('jquery') мой index.js воздушные шары в размере.

Без использования const $ = require('jquery') мой index.js 13 КБ.

С const $ = require('jquery') мой index.js 900+ кб

Это не имеет смысла для меня, потому что библиотека jquery, которую я использую, составляет 250 КБ.

Почему мой 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

Ваши исходные карты являются проблемой. Я только что создал простое репо на https://github.com/YPCrumble/balloon-SO. Посмотри в dist каталог, и вы увидите, что без исходных карт ваш файл будет ~280k, но с исходными картами это ~760k. Исходные карты добавляют дополнительный размер только тогда, когда вы объединяете библиотеку, такую ​​как jQuery, в свой код.

Изменение вашего gulpfile на:

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

... значительно уменьшит размер пучка.