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
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,54 @@ | ||
| self.__precacheManifest = [].concat(self.__precacheManifest || []); | ||
|
|
||
| /* global workbox */ | ||
| workbox.precaching.suppressWarnings(); | ||
| /** 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({request, response}) { | ||
| if (/.js.br$/.test(request.url)) { | ||
| const headers = response.headers; | ||
| const newHeaders = {}; | ||
| for (let key of headers.keys()) { | ||
| newHeaders[key] = headers.get(key); | ||
| } | ||
| // make sure the content type is compatible | ||
| newHeaders["content-type"] = "application/javascript"; | ||
| return new Response((await response.text()), { | ||
| headers: newHeaders, | ||
| }); | ||
| } | ||
| 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("index.html", { | ||
| whitelist: [/^(?!\/__).*/], | ||
| }); | ||
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,62 @@ | ||
| const webpack = require('webpack'); | ||
| const merge = require('webpack-merge'); | ||
| const baseConfig = require('./webpack-base-config'); | ||
| const BabelEsmPlugin = require('babel-esm-plugin'); | ||
| const fs = require('fs'); | ||
| const {yellow} = require('chalk'); | ||
| const { resolve } = require('path'); | ||
|
|
||
| function swConfig(config) { | ||
| const { dest, src, brotli, esm } = config; | ||
|
|
||
| const plugins = [ | ||
| new webpack.DefinePlugin({ | ||
| 'process.env.ES_BUILD': false, | ||
| 'process.env.ENABLE_BROTLI': brotli, | ||
| 'process.env.NODE_ENV': 'production', | ||
| }), | ||
| ]; | ||
|
|
||
| esm && plugins.push( | ||
| new BabelEsmPlugin({ | ||
| filename: '[name]-esm.js', | ||
| beforeStartExecution: (plugins) => { | ||
| plugins.forEach(plugin => { | ||
| if (plugin.constructor.name === 'DefinePlugin' && plugin.definitions) { | ||
|
There was a problem hiding this comment. What's the reason for only mutating values in-place here - does this fix Otherwise this could just be 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';
}
});There was a problem hiding this comment. good point, i can chk that |
||
| for (const definition in plugin.definitions) { | ||
| if (definition === 'process.env.ES_BUILD') { | ||
| plugin.definitions[definition] = true; | ||
| } | ||
| } | ||
| } else if (plugin.constructor.name === 'DefinePlugin' && !plugin.definitions) { | ||
| throw new Error('WebpackDefinePlugin found but not `process.env.ES_BUILD`.'); | ||
| } | ||
| }); | ||
| } | ||
| }) | ||
| ); | ||
|
|
||
| let swSrc = resolve(__dirname, './../sw.js'); | ||
| if (fs.existsSync(resolve(`${src}/sw.js`))) { | ||
| console.log(yellow('⚛️ Info - CLI found sw.js in source root folder, using that to compile the final service worker instead')); | ||
|
There was a problem hiding this comment. Nit: can we make this a different color like blue? yellow seems like a warning, this is informational. Also maybe shorten the message since it's a heads-up that will be shown every build? Or only show the message when things change (first build or sw.js added/removed): // only warn on first build, OR on rebuild if sw.js is added/removed:
let swSrc = resolve(__dirname, './../sw.js');
const exists = fs.existsSync(resolve(`${src}/sw.js`));
if (exists !== global.hasSeenSw) {
global.hasSeenSw = 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.'));
}
} |
||
| swSrc = resolve(`${src}/sw.js`); | ||
| } | ||
|
|
||
| return { | ||
| context: src, | ||
| entry: { | ||
| sw: swSrc, | ||
| }, | ||
| target: 'webworker', | ||
| output: { | ||
|
There was a problem hiding this comment. |
||
| path: dest, | ||
| publicPath: '/', | ||
| filename: '[name].js', | ||
| }, | ||
| plugins, | ||
| }; | ||
| } | ||
|
|
||
| module.exports = function (env) { | ||
| return merge(baseConfig(env), swConfig(env)); | ||
| }; | ||
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
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.
Would this work instead of manually cloning?
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.
This should – it's what my service workers are doing, tho I just pray that they work
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.
am i doing something wrong here?
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.
my bad - this would work though:
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.
fixed