使用jquery的Browserify shim会产生大量的javascript条目。为什么？

Question

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

当我使用const $ = require('jquery')时，我的index.js气球的大小。

不使用const $ = require('jquery')，我的index.js是13 is。

使用const $ = require('jquery') my index.js 900+ kb

这对我来说毫无意义，因为我使用的jquery库是250 is。

为什么我的index.js气球大小的原因是褐变/褐变-shim？

这是我的package.json：

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

注意，由于我使用的是ES6，所以在我的吞咽中也使用了转换babelify。

我的任务如下：

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目录，您将看到如果没有源代码映射，您的文件将是~280 k，但是对于源地图，它是~760 K。当您将像jQuery这样的库组合到代码中时，Sourcemaps才会添加额外的大小。

将您的吞咽文件更改为：

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

...would极大地减少了包的大小。