I'm seeing some really strange behavior when using split-require together with tinyify. I am trying to conditionally load a large library for browser that don't support window.crypto.subtle like this:
var splitRequire = require('split-require')
module.exports = bindCrypto
var cryptoProvider = window.crypto && window.crypto.subtle
? getWebCrypto()
: getForgeCrypto()
function bindCrypto (consumerFn) {
return function () {
var args = [].slice.call(arguments)
return cryptoProvider
.then(function (cryptoImplementation) {
return consumerFn.apply(cryptoImplementation, args)
})
}
}
function getWebCrypto () {
return Promise.resolve(require('./web-crypto'))
}
function getForgeCrypto () {
return new Promise(function (resolve, reject) {
splitRequire('./forge-crypto', function (err, forgeCrypto) {
if (err) {
return reject(err)
}
resolve(forgeCrypto)
})
})
}
This works as expected, but strangely I noticed that some time early September 2020 it looks like the splitRequire call passes an empty object ({}) to the function instead of the module's export.
However this only happens when I apply tinyify to the code above. If I leave it unminified, I will be passed the correct export. It does not seem to matter if the chunk that is split off is minified or not.
Quite frankly, this does not make any sense to me considering that it used to work and broke without any intervention (I am aware of) apparently, so I would be happy if anyone has any hint about how to even debug this?
For the sake of completeness this is how I bundle things:
var transforms = JSON.parse(JSON.stringify(pkg.browserify.transform))
var b = browserify({
entries: './index.js',
// See: https://github.com/nikku/karma-browserify/issues/130#issuecomment-120036815
postFilter: function (id, file, currentPkg) {
if (currentPkg.name === pkg.name) {
currentPkg.browserify.transform = []
}
return true
},
transform: transforms.map(function (transform) {
if (transform === '@offen/l10nify') {
return ['@offen/l10nify', { locale: locale }]
}
return transform
})
})
b.on('split.pipeline', function (pipeline) {
tinyify.applyToPipeline(pipeline)
})
return b
.exclude('dexie')
.plugin('tinyify') // commenting out this line makes things work, but I end up with non-minified code
.plugin('split-require', {
dir: dest,
filename: function (entry) {
return 'chunk-' + entry.index + '.js'
},
sri: 'sha384',
output: function (bundleName) {
var buf = ''
return to(onwrite, onend)
function onwrite (chunk, enc, cb) {
buf += chunk
cb()
}
function onend (cb) {
var hash = crypto.createHash('sha1').update(buf)
var name = bundleName.replace(/\.js$/, '') + '-' + hash.digest('hex').slice(0, 10) + '.js'
this.emit('name', name)
fs.writeFile(dest + name, buf, cb)
}
}
})
.bundle()
.pipe(source('index.js'))
.pipe(buffer())
.pipe(gap.prependText('*/'))
.pipe(gap.prependFile('./../banner.txt'))
.pipe(gap.prependText('/**'))
.pipe(rev())
.pipe(gulp.dest(dest))
.pipe(rev.manifest(dest + 'rev-manifest.json', { base: dest, merge: true }))
.pipe(gulp.dest(dest))
I'm seeing some really strange behavior when using
split-requiretogether withtinyify. I am trying to conditionally load a large library for browser that don't supportwindow.crypto.subtlelike this:This works as expected, but strangely I noticed that some time early September 2020 it looks like the
splitRequirecall passes an empty object ({}) to the function instead of the module's export.However this only happens when I apply
tinyifyto the code above. If I leave it unminified, I will be passed the correct export. It does not seem to matter if the chunk that is split off is minified or not.Quite frankly, this does not make any sense to me considering that it used to work and broke without any intervention (I am aware of) apparently, so I would be happy if anyone has any hint about how to even debug this?
For the sake of completeness this is how I bundle things: