1

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

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

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

用const $ = require('jquery')我的index.js900+ 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')
4

1 回答 1

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')

...会大大减少捆绑包的大小。

于 2016-01-08T16:53:49.053 回答