From 0aa1e4fe8ab76681e1273f2b596277744a012a1e Mon Sep 17 00:00:00 2001 From: Robert Knight Date: Fri, 29 Nov 2024 16:30:59 +0000 Subject: [PATCH 1/2] Minify production build of website The changes to rollup.config.js were copied from the hypothesis/client repo. --- Dockerfile | 2 ++ package.json | 1 + rollup.config.js | 34 +++++++++++++++++++++++++ yarn.lock | 64 +++++++++++++++++++++++++++++++++++++++++++++--- 4 files changed, 98 insertions(+), 3 deletions(-) diff --git a/Dockerfile b/Dockerfile index b488b245b..bad4ee121 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,5 +1,7 @@ FROM node:19.8.1-alpine as builder +ENV NODE_ENV production + COPY . /frontend-shared RUN cd /frontend-shared && \ yarn install --frozen-lockfile && \ diff --git a/package.json b/package.json index 37a143fac..efa4f848c 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@rollup/plugin-commonjs": "^28.0.0", "@rollup/plugin-dynamic-import-vars": "^2.1.2", "@rollup/plugin-node-resolve": "^15.0.0", + "@rollup/plugin-terser": "^0.4.4", "@rollup/plugin-virtual": "^3.0.0", "@trivago/prettier-plugin-sort-imports": "^4.1.1", "autoprefixer": "^10.3.7", diff --git a/rollup.config.js b/rollup.config.js index 9b0a34936..cca1040d9 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,9 +1,42 @@ +/* global process */ import { babel } from '@rollup/plugin-babel'; import commonjs from '@rollup/plugin-commonjs'; import dynamicImportVars from '@rollup/plugin-dynamic-import-vars'; import { nodeResolve } from '@rollup/plugin-node-resolve'; +import terser from '@rollup/plugin-terser'; +import virtual from '@rollup/plugin-virtual'; import { string } from 'rollup-plugin-string'; +const isProd = process.env.NODE_ENV === 'production'; +const prodPlugins = []; +if (isProd) { + // Minify output. + prodPlugins.push( + terser({ + format: { + // Strip *all* comments from minified output. This works around an issue + // with column numbers in stack traces in Safari. See + // https://bugs.webkit.org/show_bug.cgi?id=221548 and + // https://github.com/hypothesis/client/issues/4045. + comments: false, + + // Limit length of lines in output. This makes the minfied output easier + // to examine in tools that struggle with long lines and limits the + // impact of an issue with stack trace column numbers in Firefox. + // See https://github.com/hypothesis/client/issues/4045. + max_line_len: 1024, + }, + }), + ); + + // Eliminate debug-only imports. + prodPlugins.push( + virtual({ + 'preact/debug': '', + }), + ); +} + function bundleConfig(name, entryFile) { return { input: { @@ -34,6 +67,7 @@ function bundleConfig(name, entryFile) { string({ include: '**/*.svg', }), + ...prodPlugins, ], }; } diff --git a/yarn.lock b/yarn.lock index a6a5cd5e7..7d0cf0031 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1763,6 +1763,7 @@ __metadata: "@rollup/plugin-commonjs": ^28.0.0 "@rollup/plugin-dynamic-import-vars": ^2.1.2 "@rollup/plugin-node-resolve": ^15.0.0 + "@rollup/plugin-terser": ^0.4.4 "@rollup/plugin-virtual": ^3.0.0 "@trivago/prettier-plugin-sort-imports": ^4.1.1 autoprefixer: ^10.3.7 @@ -1916,6 +1917,16 @@ __metadata: languageName: node linkType: hard +"@jridgewell/source-map@npm:^0.3.3": + version: 0.3.6 + resolution: "@jridgewell/source-map@npm:0.3.6" + dependencies: + "@jridgewell/gen-mapping": ^0.3.5 + "@jridgewell/trace-mapping": ^0.3.25 + checksum: c9dc7d899397df95e3c9ec287b93c0b56f8e4453cd20743e2b9c8e779b1949bc3cccf6c01bb302779e46560eb45f62ea38d19fedd25370d814734268450a9f30 + languageName: node + linkType: hard + "@jridgewell/sourcemap-codec@npm:1.4.14": version: 1.4.14 resolution: "@jridgewell/sourcemap-codec@npm:1.4.14" @@ -2225,6 +2236,22 @@ __metadata: languageName: node linkType: hard +"@rollup/plugin-terser@npm:^0.4.4": + version: 0.4.4 + resolution: "@rollup/plugin-terser@npm:0.4.4" + dependencies: + serialize-javascript: ^6.0.1 + smob: ^1.0.0 + terser: ^5.17.4 + peerDependencies: + rollup: ^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + checksum: 5472f659fbb7034488df91eb01ecd2ddf6d2cf203d049aa486139225ad5566254c6ec24aad1f5d1167e35f480212ede5160df9cc80e149a28874f78ed6a7fd9a + languageName: node + linkType: hard + "@rollup/plugin-virtual@npm:^3.0.0": version: 3.0.2 resolution: "@rollup/plugin-virtual@npm:3.0.2" @@ -2668,7 +2695,7 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.14.0": +"acorn@npm:^8.14.0, acorn@npm:^8.8.2": version: 8.14.0 resolution: "acorn@npm:8.14.0" bin: @@ -3666,7 +3693,7 @@ __metadata: languageName: node linkType: hard -"commander@npm:^2.19.0": +"commander@npm:^2.19.0, commander@npm:^2.20.0": version: 2.20.3 resolution: "commander@npm:2.20.3" checksum: ab8c07884e42c3a8dbc5dd9592c606176c7eb5c1ca5ff274bcf907039b2c41de3626f684ea75ccf4d361ba004bbaff1f577d5384c155f3871e456bdf27becf9e @@ -9607,7 +9634,7 @@ __metadata: languageName: node linkType: hard -"serialize-javascript@npm:^6.0.2": +"serialize-javascript@npm:^6.0.1, serialize-javascript@npm:^6.0.2": version: 6.0.2 resolution: "serialize-javascript@npm:6.0.2" dependencies: @@ -9772,6 +9799,13 @@ __metadata: languageName: node linkType: hard +"smob@npm:^1.0.0": + version: 1.5.0 + resolution: "smob@npm:1.5.0" + checksum: 436b99477ace208e44bd7cd7933532958acca507320724a8e57c730accc47c5d77e538fbc554ded145f1e3411ac0c4b55f6782bceaa5839671104fd68d4bdc7f + languageName: node + linkType: hard + "socket.io-adapter@npm:~2.5.2": version: 2.5.4 resolution: "socket.io-adapter@npm:2.5.4" @@ -9852,6 +9886,16 @@ __metadata: languageName: node linkType: hard +"source-map-support@npm:~0.5.20": + version: 0.5.21 + resolution: "source-map-support@npm:0.5.21" + dependencies: + buffer-from: ^1.0.0 + source-map: ^0.6.0 + checksum: 43e98d700d79af1d36f859bdb7318e601dfc918c7ba2e98456118ebc4c4872b327773e5a1df09b0524e9e5063bb18f0934538eace60cca2710d1fa687645d137 + languageName: node + linkType: hard + "source-map@npm:^0.5.0": version: 0.5.7 resolution: "source-map@npm:0.5.7" @@ -10338,6 +10382,20 @@ __metadata: languageName: node linkType: hard +"terser@npm:^5.17.4": + version: 5.36.0 + resolution: "terser@npm:5.36.0" + dependencies: + "@jridgewell/source-map": ^0.3.3 + acorn: ^8.8.2 + commander: ^2.20.0 + source-map-support: ~0.5.20 + bin: + terser: bin/terser + checksum: 489afd31901a2b170f7766948a3aa0e25da0acb41e9e35bd9f9b4751dfa2fc846e485f6fb9d34f0839a96af77f675b5fbf0a20c9aa54e0b8d7c219cf0b55e508 + languageName: node + linkType: hard + "test-exclude@npm:^6.0.0": version: 6.0.0 resolution: "test-exclude@npm:6.0.0" From 5168a376bb979f0cbf2c24dd48ff66118d99b670 Mon Sep 17 00:00:00 2001 From: Robert Knight Date: Fri, 29 Nov 2024 16:33:31 +0000 Subject: [PATCH 2/2] Add `docker` and `run-docker` make targets. This enables testing the website locally as follows: 1. Run `make docker` 2. Run `make run-docker` 3. Navigate to http://localhost:5002 --- Makefile | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/Makefile b/Makefile index c1c01c31f..f224525c4 100644 --- a/Makefile +++ b/Makefile @@ -4,20 +4,31 @@ default: help .PHONY: help help: @echo "make help Show this help message" - @echo "make dev Run the pattern library app in a development server" @echo "make build Build the package" - @echo "make lint Run the code linter(s) and print any warnings" @echo "make checkformatting Check code formatting" + @echo "make clean Delete development artefacts (cached files etc.)" + @echo "make dev Run the pattern library app in a development server" + @echo "make docker Build Docker image for the website" @echo "make format Automatically format code" - @echo "make test Run the unit tests once" + @echo "make lint Run the code linter(s) and print any warnings" + @echo "make run-docker Run a Docker container using the image created by \`make docker\`" @echo "make sure Make sure that the formatter, linter, tests, etc all pass" - @echo "make clean Delete development artefacts (cached files, " - @echo " dependencies, etc)" + @echo "make test Run the unit tests once" .PHONY: dev dev: node_modules/.uptodate node_modules/.bin/gulp watch +.PHONY: docker +docker: + @git archive --format=tar.gz HEAD | docker build -t hypothesis/frontend-shared:latest - + +# Run Docker container. Publish to port 5002 on the host to avoid a conflict +# with other Hypothesis projects. +.PHONY: run-docker +run-docker: + @docker run --rm -p 5002:5001 --name hypothesis-frontend-shared hypothesis/frontend-shared:latest + .PHONY: test test: node_modules/.uptodate ifdef ARGS