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":"$"
},

注意我也在使用变换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创建了一个简单的回购。查看dist目录，您将看到没有源映射的文件大约为280k，但使用源映射时它的大小为~760k。当您将像jQuery这样的库组合到代码中时，源映射只会添加额外的大小。

将gulpfile更改为：

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

...会极大地减少捆绑尺寸。

Browserify shim with jquery导致大型入门javascript。为什么呢？

1 个答案: