From 8fe8185709fcfcd2dda6c3639490b0ee555b1c65 Mon Sep 17 00:00:00 2001 From: David Murdoch <187813+davidmurdoch@users.noreply.github.com> Date: Tue, 20 Aug 2024 15:29:18 -0400 Subject: [PATCH] perf: only bundle woff2 fonts --- development/build/styles.js | 3 +- .../utils/plugins/ManifestPlugin/index.ts | 5 -- development/webpack/webpack.config.ts | 4 +- lavamoat/build-system/policy.json | 71 +++++++++++++++++++ package.json | 1 + types/postcss-discard-font-face.d.ts | 68 ++++++++++++++++++ yarn.lock | 53 ++++++++++++++ 7 files changed, 198 insertions(+), 7 deletions(-) create mode 100644 types/postcss-discard-font-face.d.ts diff --git a/development/build/styles.js b/development/build/styles.js index a8ac03c96ea5..8dbf0d42d94c 100644 --- a/development/build/styles.js +++ b/development/build/styles.js @@ -5,6 +5,7 @@ const gulpStylelint = require('gulp-stylelint'); const watch = require('gulp-watch'); const sourcemaps = require('gulp-sourcemaps'); const rtlcss = require('postcss-rtlcss'); +const discardFonts = require('postcss-discard-font-face'); const postcss = require('gulp-postcss'); const pipeline = pify(require('readable-stream').pipeline); const sass = require('sass-embedded'); @@ -83,7 +84,7 @@ async function buildScssPipeline(src, dest, devMode) { '-mm-fa-path()': () => new sass.SassString('./fonts/fontawesome'), }, }).on('error', gulpSass.logError), - postcss([autoprefixer(), rtlcss()]), + postcss([autoprefixer(), rtlcss(), discardFonts(['woff2'])]), devMode && sourcemaps.write(), gulp.dest(dest), ].filter(Boolean), diff --git a/development/webpack/utils/plugins/ManifestPlugin/index.ts b/development/webpack/utils/plugins/ManifestPlugin/index.ts index c08cfd7ba6e6..bd18541cc1e3 100644 --- a/development/webpack/utils/plugins/ManifestPlugin/index.ts +++ b/development/webpack/utils/plugins/ManifestPlugin/index.ts @@ -93,11 +93,6 @@ export class ManifestPlugin { '.txt', '.wasm', '.vtt', // very slow to process? - // ttf is disabled as some were getting corrupted during compression. You - // can test this by uncommenting it, running with --zip, and then unzipping - // the resulting zip file. If it is still broken the unzip operation will - // show an error. - // '.ttf', '.wav', '.xml', ]); diff --git a/development/webpack/webpack.config.ts b/development/webpack/webpack.config.ts index ec7bf3735269..9ec97b5507e1 100644 --- a/development/webpack/webpack.config.ts +++ b/development/webpack/webpack.config.ts @@ -17,6 +17,7 @@ import CopyPlugin from 'copy-webpack-plugin'; import HtmlBundlerPlugin from 'html-bundler-webpack-plugin'; import rtlCss from 'postcss-rtlcss'; import autoprefixer from 'autoprefixer'; +import discardFonts from 'postcss-discard-font-face'; import type ReactRefreshPluginType from '@pmmmwh/react-refresh-webpack-plugin'; import { SelfInjectPlugin } from './utils/plugins/SelfInjectPlugin'; import { @@ -290,6 +291,7 @@ const config = { plugins: [ autoprefixer({ overrideBrowserslist: browsersListQuery }), rtlCss({ processEnv: false }), + discardFonts(['woff2']), // keep woff2 fonts ], }, }, @@ -331,7 +333,7 @@ const config = { }, // images, fonts, wasm, etc. { - test: /\.(?:png|jpe?g|ico|webp|svg|gif|ttf|eot|woff2?|wasm)$/u, + test: /\.(?:png|jpe?g|ico|webp|svg|gif|woff2|wasm)$/u, type: 'asset/resource', generator: { filename: 'assets/[name].[contenthash][ext]' }, }, diff --git a/lavamoat/build-system/policy.json b/lavamoat/build-system/policy.json index 0dcb0cc02724..2745fc191747 100644 --- a/lavamoat/build-system/policy.json +++ b/lavamoat/build-system/policy.json @@ -6668,6 +6668,72 @@ "postcss>source-map-js": true } }, + "postcss-discard-font-face": { + "packages": { + "postcss-discard-font-face>balanced-match": true, + "postcss-discard-font-face>postcss": true + } + }, + "postcss-discard-font-face>postcss": { + "builtin": { + "fs": true, + "path": true + }, + "globals": { + "console": true + }, + "packages": { + "postcss-discard-font-face>postcss>chalk": true, + "postcss-discard-font-face>postcss>js-base64": true, + "postcss-discard-font-face>postcss>source-map": true, + "postcss-discard-font-face>postcss>supports-color": true + } + }, + "postcss-discard-font-face>postcss>chalk": { + "globals": { + "process.env.TERM": true, + "process.platform": true + }, + "packages": { + "postcss-discard-font-face>postcss>chalk>ansi-styles": true, + "postcss-discard-font-face>postcss>chalk>escape-string-regexp": true, + "postcss-discard-font-face>postcss>chalk>strip-ansi": true, + "postcss-discard-font-face>postcss>chalk>supports-color": true, + "prettier-eslint>loglevel-colored-level-prefix>chalk>has-ansi": true + } + }, + "postcss-discard-font-face>postcss>chalk>strip-ansi": { + "packages": { + "postcss-discard-font-face>postcss>chalk>strip-ansi>ansi-regex": true + } + }, + "postcss-discard-font-face>postcss>chalk>supports-color": { + "globals": { + "process.argv": true, + "process.env": true, + "process.platform": true, + "process.stdout": true + } + }, + "postcss-discard-font-face>postcss>js-base64": { + "globals": { + "Base64": "write", + "define": true + } + }, + "postcss-discard-font-face>postcss>supports-color": { + "globals": { + "process": true + }, + "packages": { + "postcss-discard-font-face>postcss>supports-color>has-flag": true + } + }, + "postcss-discard-font-face>postcss>supports-color>has-flag": { + "globals": { + "process.argv": true + } + }, "postcss-rtlcss": { "globals": { "SuppressedError": true @@ -7491,6 +7557,11 @@ "zipToModeAwareCache": true } }, + "prettier-eslint>loglevel-colored-level-prefix>chalk>has-ansi": { + "packages": { + "prettier-eslint>loglevel-colored-level-prefix>chalk>has-ansi>ansi-regex": true + } + }, "prop-types": { "globals": { "console": true, diff --git a/package.json b/package.json index 5e5289028f9a..57183349f868 100644 --- a/package.json +++ b/package.json @@ -621,6 +621,7 @@ "nyc": "^15.1.0", "path-browserify": "^1.0.1", "postcss": "^8.4.32", + "postcss-discard-font-face": "^3.0.0", "postcss-loader": "^8.1.1", "postcss-rtlcss": "^4.0.9", "prettier": "^2.7.1", diff --git a/types/postcss-discard-font-face.d.ts b/types/postcss-discard-font-face.d.ts new file mode 100644 index 000000000000..83adf5c4a43c --- /dev/null +++ b/types/postcss-discard-font-face.d.ts @@ -0,0 +1,68 @@ +declare module 'postcss-discard-font-face' { + import { type Plugin as PostCssPlugin } from 'postcss'; + + /** + * For each font, return `false` to remove, or a new string if you would like + * to transform the *URL*. + * + * @example + * ```typescript + * (url: string, format: string) => { + * return !url.includes('.exe'); // remove if url ends with `.exe` + * } + * ``` + */ + type FilterFunction = (url: string, format: string) => boolean | string; + + /** + * Allowlist is an array of formats to *keep*. + * + * @example + * ```javascript + * ['ttf', 'svg'] // keep ttf and svg formats + * ``` + */ + type Allowlist = string[]; + + /** + * @example + * ```javascript + * { + * weight: [400], + * style: ['normal'] + * } + * ``` + */ + type Properties = Record; + + /** + * @example + * ```typescript + * const options = { + * font: { + * // keep `Arial` with `weight: 400` and `style: normal` + * Arial: { + * weight: [400], + * style: ["normal"] + * } + * } + * } + * ``` + */ + type Options = { + font: { + [fontName: string]: Properties; + }; + }; + + /** + * Discard font faces with PostCSS. + * + * @param filter - A filter function, allowlist, or options object + */ + function discardFontFace( + filter: Allowlist | FilterFunction | Options, + ): PostCssPlugin; + + export = discardFontFace; +} diff --git a/yarn.lock b/yarn.lock index be302858867f..379627e65f21 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13335,6 +13335,13 @@ __metadata: languageName: node linkType: hard +"balanced-match@npm:^0.4.1": + version: 0.4.2 + resolution: "balanced-match@npm:0.4.2" + checksum: 10/205ebb42ce8529fa8e043a808b41bfb9818d5f98a8eb76a1cd5483f8a98dd0baefc8a9d940f36b591b1316a04f56b35c32b60ac9b1f848e41e4698672cec6c1e + languageName: node + linkType: hard + "balanced-match@npm:^1.0.0": version: 1.0.2 resolution: "balanced-match@npm:1.0.2" @@ -21021,6 +21028,13 @@ __metadata: languageName: node linkType: hard +"has-flag@npm:^1.0.0": + version: 1.0.0 + resolution: "has-flag@npm:1.0.0" + checksum: 10/ce3f8ae978e70f16e4bbe17d3f0f6d6c0a3dd3b62a23f97c91d0fda9ed8e305e13baf95cc5bee4463b9f25ac9f5255de113165c5fb285e01b8065b2ac079b301 + languageName: node + linkType: hard + "has-flag@npm:^3.0.0": version: 3.0.0 resolution: "has-flag@npm:3.0.0" @@ -23790,6 +23804,13 @@ __metadata: languageName: node linkType: hard +"js-base64@npm:^2.1.9": + version: 2.6.4 + resolution: "js-base64@npm:2.6.4" + checksum: 10/c1a740a34fbb0ad0a528c2ab8749d7f873b1856a0638826306fcd98502e3c8c833334dff233085407e3201be543e5e71bf9692da7891ca680d9b03d027247a6a + languageName: node + linkType: hard + "js-base64@npm:^3.6.0": version: 3.6.1 resolution: "js-base64@npm:3.6.1" @@ -26260,6 +26281,7 @@ __metadata: path-browserify: "npm:^1.0.1" pify: "npm:^5.0.0" postcss: "npm:^8.4.32" + postcss-discard-font-face: "npm:^3.0.0" postcss-loader: "npm:^8.1.1" postcss-rtlcss: "npm:^4.0.9" prettier: "npm:^2.7.1" @@ -29216,6 +29238,16 @@ __metadata: languageName: node linkType: hard +"postcss-discard-font-face@npm:^3.0.0": + version: 3.0.0 + resolution: "postcss-discard-font-face@npm:3.0.0" + dependencies: + balanced-match: "npm:^0.4.1" + postcss: "npm:^5.0.21" + checksum: 10/968632c4426bb04816787575ad768ad0bca572573366aa7ef2f91069ab5224319bea3517b14d7ffb501f6787bc1d8d4a265f40027d4cc593cfcd7824bf834c34 + languageName: node + linkType: hard + "postcss-html@npm:^0.36.0": version: 0.36.0 resolution: "postcss-html@npm:0.36.0" @@ -29452,6 +29484,18 @@ __metadata: languageName: node linkType: hard +"postcss@npm:^5.0.21": + version: 5.2.18 + resolution: "postcss@npm:5.2.18" + dependencies: + chalk: "npm:^1.1.3" + js-base64: "npm:^2.1.9" + source-map: "npm:^0.5.6" + supports-color: "npm:^3.2.3" + checksum: 10/ad157696a258c37e8cdebd28c575bba8e028276b030621d7ac191f855b61d56de9fe751f405ca088693806971426a7321f0b0201e0e828e99b1960ac8f474215 + languageName: node + linkType: hard + "postcss@npm:^7.0.14, postcss@npm:^7.0.16, postcss@npm:^7.0.2, postcss@npm:^7.0.21, postcss@npm:^7.0.26, postcss@npm:^7.0.32, postcss@npm:^7.0.6, postcss@npm:^7.0.7": version: 7.0.39 resolution: "postcss@npm:7.0.39" @@ -34175,6 +34219,15 @@ __metadata: languageName: node linkType: hard +"supports-color@npm:^3.2.3": + version: 3.2.3 + resolution: "supports-color@npm:3.2.3" + dependencies: + has-flag: "npm:^1.0.0" + checksum: 10/476a70d263a1f7ac11c26c10dfc58f0d9439edf198005b95f0e358ea8182d06b492d96320f16a841e4e968c7189044dd8c3f3037bd533480d15c7cc00e17c5d8 + languageName: node + linkType: hard + "supports-color@npm:^5.3.0": version: 5.5.0 resolution: "supports-color@npm:5.5.0"