使用 jquery 的 Browserify shim 会导致较大的条目 javascript。为什么？

Question

我有一个最小的 index.js，它基本上是空的。

当我使用 const $ = require('jquery') 我的 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":"$"
},

请注意，我也在我的 gulp 中使用转换 babelify，因为我使用的是 ES6。

我的 gulp 任务如下：

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 创建了一个简单的 repo。查看 dist 目录，您会发现如果没有 sourcemaps，您的文件将是 ~280k，但如果有 sourcemaps，它是 ~760k。当您将像 jQuery 这样的库合并到您的代码中时，Sourcemaps 只会增加额外的大小。

将您的 gulpfile 更改为：

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

...会极大地减少包的大小。

使用 jquery 的 Browserify shim 会导致较大的条目 javascript。为什么？

Browserify shim with jquery results in large entry javascript. Why?

jquery

ecmascript-6

browserify

browserify-shim