Adds brotli support for modern javascript #674
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| self.__precacheManifest = [].concat(self.__precacheManifest || []); | ||
|
|
||
| /* global workbox */ | ||
| /** We are sure brotli is enabled for browsers supporting script type=module | ||
| * so we do brotli support only for them. | ||
| * We can do brolti support for other browsers but there is no good way of | ||
| * feature detect the same at the time of pre-caching. | ||
| */ | ||
| if (process.env.ENABLE_BROTLI && process.env.ES_BUILD) { | ||
| // Alter the precache manifest to precache brotli files instead of gzip files. | ||
| self.__precacheManifest = self.__precacheManifest.map(asset => { | ||
| if (/.*.js$/.test(asset.url)) { | ||
| asset.url = asset.url.replace(/.esm.js$/, '.esm.js.br'); | ||
| } | ||
| return asset; | ||
| }); | ||
|
|
||
| class BrotliRedirectPlugin { | ||
| // Before saving the response in cache, we need to treat the headers. | ||
| async cacheWillUpdate({ response }) { | ||
| const clonedResponse = response.clone(); | ||
| if (/.js.br(\?.*)?$/.test(clonedResponse.url)) { | ||
| const headers = new Headers(clonedResponse.headers); | ||
| headers.set('content-type', 'application/javascript'); | ||
| return new Response(await clonedResponse.text(), { headers }); | ||
| } | ||
| return response; | ||
| } | ||
| } | ||
| workbox.precaching.addPlugins([new BrotliRedirectPlugin()]); | ||
| } | ||
|
|
||
| const precacheOptions = {}; | ||
| if (process.env.ENABLE_BROTLI) { | ||
developit marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| precacheOptions['urlManipulation'] = ({ url }) => { | ||
| if (/.esm.js$/.test(url.href)) { | ||
| url.href = url.href + '.br'; | ||
| } | ||
| return [url]; | ||
| }; | ||
| } | ||
|
|
||
| workbox.precaching.precacheAndRoute(self.__precacheManifest, precacheOptions); | ||
| workbox.routing.registerNavigationRoute( | ||
| workbox.precaching.getCacheKeyForURL('/index.html') | ||
| ); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin'); | ||
| const BabelEsmPlugin = require('babel-esm-plugin'); | ||
| const { DefinePlugin } = require('webpack'); | ||
| const fs = require('fs'); | ||
| const { resolve } = require('path'); | ||
| const { blue } = require('chalk'); | ||
|
|
||
| class SWBuilderPlugin { | ||
| constructor(config) { | ||
| const { src, brotli, esm } = config; | ||
| this.brotli_ = brotli; | ||
| this.esm_ = esm; | ||
| this.src_ = src; | ||
| } | ||
| apply(compiler) { | ||
| let swSrc = resolve(__dirname, '../sw.js'); | ||
| const exists = fs.existsSync(resolve(`${this.src_}/sw.js`)); | ||
| if (exists) { | ||
| if (exists) { | ||
| console.log( | ||
| blue( | ||
| '⚛️ Detected custom sw.js: compiling instead of default Service Worker.' | ||
| ) | ||
| ); | ||
| } else { | ||
| console.log( | ||
|
|
||
| blue('⚛️ No custom sw.js detected: compiling default Service Worker.') | ||
| ); | ||
| } | ||
| } | ||
| compiler.hooks.make.tapAsync( | ||
| this.constructor.name, | ||
| (compilation, callback) => { | ||
| const outputOptions = compiler.options; | ||
| const plugins = [ | ||
| new BabelEsmPlugin({ | ||
| filename: '[name]-esm.js', | ||
| excludedPlugins: ['BabelEsmPlugin', this.constructor.name], | ||
| beforeStartExecution: plugins => { | ||
| plugins.forEach(plugin => { | ||
| if (plugin.constructor.name === 'DefinePlugin') { | ||
| if (!plugin.definitions) | ||
| throw Error( | ||
| 'ESM Error: DefinePlugin found without definitions.' | ||
| ); | ||
| plugin.definitions['process.env.ES_BUILD'] = true; | ||
| } | ||
| }); | ||
| }, | ||
| }), | ||
| new DefinePlugin({ | ||
| 'process.env.ENABLE_BROTLI': this.brotli_, | ||
| 'process.env.ES_BUILD': false, | ||
| 'process.env.NODE_ENV': 'production', | ||
| }), | ||
| ]; | ||
|
|
||
| /** | ||
| * We are deliberatly not passing plugins in createChildCompiler. | ||
| * All webpack does with plugins is to call `apply` method on them | ||
| * with the childCompiler. | ||
| * But by then we haven't given childCompiler a fileSystem or other options | ||
| * which a few plugins might expect while execution the apply method. | ||
| * We do call the `apply` method of all plugins by ourselves later in the code | ||
| */ | ||
| const childCompiler = compilation.createChildCompiler( | ||
| this.constructor.name | ||
| ); | ||
|
|
||
| childCompiler.context = compiler.context; | ||
| childCompiler.options = Object.assign({}, outputOptions); | ||
| childCompiler.options.entry = { | ||
| sw: swSrc, | ||
| }; | ||
| childCompiler.options.target = 'webworker'; | ||
| childCompiler.options.output = JSON.parse( | ||
|
There was a problem hiding this comment. @developit @ForsakenHarmony do we have any dep already which can help me do this deepcopy? |
||
| JSON.stringify(childCompiler.options.output) | ||
| ); | ||
| childCompiler.options.output.filename = '[name].js'; | ||
|
|
||
| // Call the `apply` method of all plugins by ourselves. | ||
| if (Array.isArray(plugins)) { | ||
| for (const plugin of plugins) { | ||
| plugin.apply(childCompiler); | ||
| } | ||
| } | ||
|
|
||
| childCompiler.apply( | ||
| new SingleEntryPlugin(compiler.context, swSrc, 'sw') | ||
| ); | ||
|
|
||
| compilation.hooks.additionalAssets.tapAsync( | ||
| this.constructor.name, | ||
| childProcessDone => { | ||
| childCompiler.runAsChild((err, entries, childCompilation) => { | ||
| if (!err) { | ||
| compilation.assets = Object.assign( | ||
| childCompilation.assets, | ||
| compilation.assets | ||
| ); | ||
| } | ||
| err && compilation.errors.push(err); | ||
| childProcessDone(); | ||
| }); | ||
| } | ||
| ); | ||
| callback(); | ||
| } | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| module.exports = SWBuilderPlugin; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
guess this should use the util log fn