chore!: dist files optimizations (sw asset name changes) #97

SgtPooki · 2024-03-08T22:37:54Z

dont gzip html files

Title

Gzip compression for prod builds only.

Description

Moves compression plugin to prod config only.
Removes compression for webpack-dev-server (should speed up dev builds).
removes html files from compression

related to #96 & #93

On `main` (without #89 and #94)

Development builds are 20M
Prod builds are 3.5M

Notes & open questions

Notes

FYSI, my nginx config required the following changes:

gzip_static on; to serve pre-compressed files
building nginx with --with-http_gzip_static_module to enable serving pre-compressed files
- brew tap denji/nginx
- brew install nginx-full --with-http_gzip_static_module

For IPFS hosted sites, we likely need to add some entries:
- /*.js /:splat.js.gz 301
- /:splat.css /:splat.css.gz 301

Questions

does anyone see any issues with this approach?
are the splat entries above correct?

Change checklist

I have performed a self-review of my own code
I have made corresponding changes to the documentation if necessary (this includes comments as well)
I have added tests that prove my fix is effective or that my feature works

- dont gzip html files

SgtPooki · 2024-03-08T22:41:20Z

webpack.config.js

+        numiterations: 15,
+        minRatio: 0.8
+      },
+      deleteOriginalAssets: true


deleteOriginalAssets was in the wrong location (inside compressionOptions) previously.

SgtPooki · 2024-03-09T00:03:02Z

ok.. for testing redirects locally, taken from https://github.com/ipfs/kubo/blob/e22f47ae4b4d83cf5e3f1c901c10905ebd69d492/test/sharness/t0109-gateway-web-_redirects.sh#L3


test_should_contain() {
  test "$#" = 2 || error "bug in the test script: not 2 parameters to test_should_contain"
  if ! grep -q "$1" "$2"
  then
    echo "'$2' does not contain '$1', it contains:"
    cat "$2"
    return 1
  fi
}

we can do the following with a locally running kubo node:

> npm run clean && npm run build && ls dist && CID=$(npx kubo add --cid-version 1 -Qr dist)
> curl -sD - "http://127:0.0.1:8081/ipfs/$CID/config" > response  &&
  test_should_contain "302 Moved Permanently" response

and it will fail if the redirect doesn't match.

SgtPooki · 2024-03-09T00:38:10Z

Before merging from main (with all the updates from #89 and others)

After merging from main:

SgtPooki · 2024-03-09T00:57:16Z

without node-polyfills-plugin (78a564f)

SgtPooki · 2024-03-09T02:04:04Z

i've got it down a bit, and normalized some of the output chunk names in 64335ff (#97):

lidel

.gz produced by CompressionPlugin are not used, we have gzip support on inbrowser.link without them. see details below

let's focus this PR to be about minimizing browser bundle, infra stuff is out of scope

public/_redirects

webpack.config.js

SgtPooki · 2024-03-11T23:04:50Z

the service worker name is going to change with this:

On main branch

> npm run clean && npm i && npm run build && npx http-server dist

[2024-03-11T22:57:31.489Z]  "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T22:57:31.626Z]  "GET /vendor-react.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T22:57:31.639Z]  "GET /main.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T22:57:31.639Z]  "GET /sw.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T22:57:31.783Z]  "GET /favicon.ico" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T22:57:31.946Z]  "GET /favicon.ico" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T22:57:31.970Z]  "GET /519.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"

Service worker source from chrome devtools

on this branch

> npm run clean && npm run build && npx http-server dist

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
  http://127.0.0.1:8080
  http://192.168.1.227:8080
Hit CTRL-C to stop the server

# Load the site in browser...


[2024-03-11T23:02:30.242Z]  "GET /519.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
(node:91351) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node --trace-deprecation ...` to show where the warning was created)
[2024-03-11T23:02:30.256Z]  "GET /519.js" Error (404): "Not found"
[2024-03-11T23:03:35.909Z]  "GET /" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T23:03:36.064Z]  "GET /vendor-react.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T23:03:36.070Z]  "GET /main.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T23:03:36.070Z]  "GET /vendor-rest.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T23:03:36.202Z]  "GET /favicon.ico" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T23:03:36.351Z]  "GET /favicon.ico" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T23:03:36.377Z]  "GET /sw.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T23:03:36.391Z]  "GET /vendor-rest.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"
[2024-03-11T23:03:36.574Z]  "GET /sw.js" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36"

Service worker source from chrome devtools

SgtPooki

self review

SgtPooki · 2024-03-11T23:32:01Z

src/service-worker-utils.ts

@@ -1,7 +1,7 @@
 import { log } from './lib/logger.ts'

 export async function registerServiceWorker (): Promise<ServiceWorkerRegistration> {
-  const swRegistration = await navigator.serviceWorker.register(new URL('sw.ts', import.meta.url))
+  const swRegistration = await navigator.serviceWorker.register(new URL(/* webpackChunkName: "sw" */'sw.ts', import.meta.url))


name is prefixed in webpack config

SgtPooki · 2024-03-11T23:37:29Z

src/sw.ts

@@ -103,6 +105,21 @@ self.addEventListener('fetch', (event) => {
 * Functions
 ******************************************************
 */
+async function getVerifiedFetch (): Promise<VerifiedFetch> {


moved in here because nothing else is using it

SgtPooki · 2024-03-11T23:38:12Z

webpack.config.js

+  chunks: 'async',
+  minSize: 20000,
+  minRemainingSize: 0,
+  minChunks: 1,
+  maxAsyncRequests: 30,
+  maxInitialRequests: 30,
+  enforceSizeThreshold: 1024,


most of these are defaults

SgtPooki · 2024-03-11T23:40:05Z

webpack.config.js

+  output: {
+    path: paths.build,
+    publicPath: '/',
+    filename: 'ipfs-sw-[name].js'


dev and prod build produce the same assets now

SgtPooki · 2024-03-11T23:42:14Z

final build output:

note that we are no longer creating pre-compressed gzip assets, but webpack bundle analyzer gives us it's guess at what that size would be.

* origin/main: feat: allow loading config page from subdomain after sw registration (#96) chore!: dist files optimizations (sw asset name changes) (#97) Update src/components/CidRenderer.tsx chore: remove in-page rendering

chore: gzip compression only on prod builds

2a4bda0

- dont gzip html files

SgtPooki commented Mar 8, 2024

View reviewed changes

SgtPooki added 4 commits March 8, 2024 16:30

feat: npm run analyze to see bundle info

ab5d2df

chore: temporarily disable deleting original assets

f712b26

tmp: some _redirects ideas...

143b081

Merge branch 'main' into feat/asset-optimization

c3ea108

SgtPooki requested review from lidel and aschmahmann March 9, 2024 00:37

chore: add terser. remove node-polyfills-plugin

78a564f

chore: chunk optimizing

64335ff

SgtPooki changed the title ~~chore: gzip compression only on prod builds~~ chore: dist files optimizations Mar 11, 2024

lidel requested changes Mar 11, 2024

View reviewed changes

public/_redirects Outdated Show resolved Hide resolved

webpack.config.js Outdated Show resolved Hide resolved

chore: remove empty file

83f3131

SgtPooki added 6 commits March 11, 2024 16:06

chore: remove webpack compression plugin

b2ff0d6

chore: revert _redirects changes

7272f1d

chore!: since name is changing, adding prefix to assets now

d06b8a5

fix: use the same names for dev & prod

2e5a646

chore: webpack config cleanup

493beb9

chore: remove unnecessary splitChunks config

b4c34b1

SgtPooki commented Mar 11, 2024

View reviewed changes

SgtPooki changed the title ~~chore: dist files optimizations~~ chore!: dist files optimizations (sw asset name changes) Mar 11, 2024

SgtPooki merged commit 0c81f2a into main Mar 11, 2024
19 checks passed

SgtPooki deleted the feat/asset-optimization branch March 11, 2024 23:44

SgtPooki mentioned this pull request Mar 12, 2024

Update mechanisms #26

Closed

lidel mentioned this pull request Mar 15, 2024

chore(main): release 1.0.0 #120

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore!: dist files optimizations (sw asset name changes) #97

chore!: dist files optimizations (sw asset name changes) #97

SgtPooki commented Mar 8, 2024 •

edited

Loading

SgtPooki Mar 8, 2024

SgtPooki commented Mar 9, 2024

SgtPooki commented Mar 9, 2024

SgtPooki commented Mar 9, 2024

SgtPooki commented Mar 9, 2024

lidel left a comment •

edited

Loading

SgtPooki commented Mar 11, 2024

SgtPooki left a comment

SgtPooki Mar 11, 2024

SgtPooki Mar 11, 2024

SgtPooki Mar 11, 2024

SgtPooki Mar 11, 2024

SgtPooki commented Mar 11, 2024

chore!: dist files optimizations (sw asset name changes) #97

chore!: dist files optimizations (sw asset name changes) #97

Conversation

SgtPooki commented Mar 8, 2024 • edited Loading

Title

Description

On main (without #89 and #94)

Notes & open questions

Notes

Questions

Change checklist

SgtPooki Mar 8, 2024

Choose a reason for hiding this comment

SgtPooki commented Mar 9, 2024

SgtPooki commented Mar 9, 2024

SgtPooki commented Mar 9, 2024

SgtPooki commented Mar 9, 2024

lidel left a comment • edited Loading

Choose a reason for hiding this comment

SgtPooki commented Mar 11, 2024

On main branch

Service worker source from chrome devtools

on this branch

Service worker source from chrome devtools

SgtPooki left a comment

Choose a reason for hiding this comment

SgtPooki Mar 11, 2024

Choose a reason for hiding this comment

SgtPooki Mar 11, 2024

Choose a reason for hiding this comment

SgtPooki Mar 11, 2024

Choose a reason for hiding this comment

SgtPooki Mar 11, 2024

Choose a reason for hiding this comment

SgtPooki commented Mar 11, 2024

SgtPooki commented Mar 8, 2024 •

edited

Loading

On `main` (without #89 and #94)

lidel left a comment •

edited

Loading