chore: efficient webpack bundles (#9256)

* fix: no opaque responses Signed-off-by: Matt Krick <[email protected]> * add min bundle size Signed-off-by: Matt Krick <[email protected]> * fix: only dynamic cache parabol assets Signed-off-by: Matt Krick <[email protected]> --------- Signed-off-by: Matt Krick <[email protected]>
ParabolInc · Dec 11, 2023 · 01d04fc · 01d04fc
1 parent 70db85f
commit 01d04fc
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 53 deletions.
diff --git a/package.json b/package.json
@@ -86,6 +86,7 @@
     "@graphql-codegen/typescript-resolvers": "^4.0.1",
     "@graphql-tools/merge": "^9.0.0",
     "@sucrase/webpack-loader": "^2.0.0",
+    "@swc/core": "^1.3.96",
     "@tailwindcss/container-queries": "^0.1.0",
     "@tailwindcss/forms": "^0.5.3",
     "@types/dotenv": "^6.1.1",
@@ -123,7 +124,7 @@
     "terser-webpack-plugin": "^5.3.9",
     "ts-loader": "9.2.6",
     "vscode-apollo-relay": "^1.5.0",
-    "webpack": "^5.81.0",
+    "webpack": "^5.89.0",
     "webpack-cli": "4.9.1",
     "workbox-webpack-plugin": "^6.5.4",
     "yargs": "^17.7.2",

diff --git a/packages/client/polyfills.ts b/packages/client/polyfills.ts
@@ -1,5 +1,3 @@
-import 'core-js/stable'
-import 'regenerator-runtime/runtime'
 import './types/modules.d'
 
 if (__PRODUCTION__) {

diff --git a/packages/client/serviceWorker/sw.ts b/packages/client/serviceWorker/sw.ts
@@ -17,6 +17,8 @@ const STATIC_CACHE = `parabol-static-${__APP_VERSION__}`
 const DYNAMIC_CACHE = `parabol-dynamic-${__APP_VERSION__}`
 const cacheList = [STATIC_CACHE, DYNAMIC_CACHE]
 
+// this gets built in applyEnvVarToClientAssets
+const PUBLIC_PATH = `__PUBLIC_PATH__`.replace(/\/{2,}/, 'https://')
 const waitUntil = (cb: (e: ExtendableEvent) => void) => (e: ExtendableEvent) => {
   e.waitUntil(cb(e))
 }
@@ -27,7 +29,8 @@ const onInstall = async (_event: ExtendableEvent) => {
   const cacheNames = await caches.keys()
   const oldStaticCacheName = cacheNames.find((cacheName) => cacheName.startsWith('parabol-static'))
   const newCache = await caches.open(STATIC_CACHE)
-  const fetchCachedFiles = async (urls: string[]) => Promise.all(urls.map((url) => newCache.add(url)))
+  const fetchCachedFiles = async (urls: string[]) =>
+    Promise.all(urls.map((url) => newCache.add(url)))
 
   // if this is their first service worker, fetch it all
   if (!oldStaticCacheName) {
@@ -73,7 +76,11 @@ const onFetch = async (event: FetchEvent) => {
       return cachedRes
     }
     try {
-      const networkRes = await fetch(request)
+      // request.mode could be 'no-cors'
+      // By fetching the URL without specifying the mode the response will not be opaque
+      const isParabolHosted = url.startsWith(PUBLIC_PATH) || url.startsWith(self.origin)
+      const req = isParabolHosted ? request.url : request
+      const networkRes = await fetch(req)
       const cache = await caches.open(DYNAMIC_CACHE)
       // cloning here because I'm not sure if we must clone before reading the body
       cache.put(request.url, networkRes.clone()).catch(console.error)

diff --git a/scripts/prod.js b/scripts/prod.js
@@ -16,9 +16,7 @@ const prod = async (isDeploy, noDeps) => {
       `yarn webpack --config ./scripts/webpack/prod.servers.config.js --no-stats --env=noDeps=${noDeps}`
     ),
     runChild(
-      `yarn webpack --config ./scripts/webpack/prod.client.config.js --no-stats --env=isDeploy=${
-        isDeploy || noDeps
-      }`
+      `yarn webpack --config ./scripts/webpack/prod.client.config.js --no-stats --env=minimize=${isDeploy}`
     )
   ])
 }

diff --git a/scripts/webpack/prod.client.config.js b/scripts/webpack/prod.client.config.js
@@ -34,8 +34,8 @@ const babelPresets = [
 ]
 
 module.exports = (config) => {
-  const isDeploy = config.isDeploy === 'true'
-  const isStats = config.isStats === 'true'
+  const minimize = config.minimize === 'true'
+  const isStats = false // true to analyzing bundle size
   return {
     stats: {
       assets: false
@@ -50,7 +50,8 @@ module.exports = (config) => {
       publicPath: 'auto',
       filename: '[name]_[contenthash].js',
       chunkFilename: '[name]_[contenthash].js',
-      crossOriginLoading: 'anonymous'
+      crossOriginLoading: 'anonymous',
+      assetModuleFilename: '[name]_[contenthash][ext]'
     },
     resolve: {
       alias: {
@@ -69,19 +70,14 @@ module.exports = (config) => {
       modules: [path.resolve(CLIENT_ROOT, '../node_modules'), 'node_modules']
     },
     optimization: {
-      minimize: Boolean(isDeploy || isStats),
+      minimize,
       minimizer: [
         new TerserPlugin({
-          parallel: isDeploy ? 2 : true,
+          minify: TerserPlugin.swcMinify,
+          parallel: true,
           terserOptions: {
-            output: {
-              comments: false,
-              ecma: 6
-            },
-            compress: {
-              ecma: 6
-            }
-            // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+            mangle: true,
+            compress: true
           }
         })
       ]
@@ -117,11 +113,23 @@ module.exports = (config) => {
       new InjectManifest({
         swSrc: path.join(PROJECT_ROOT, 'packages/client/serviceWorker/sw.ts'),
         swDest: 'swSkeleton.js',
-        exclude: [/GraphqlContainer/, /\.map$/, /^manifest.*\.js$/, /index.html$/],
+        // Trying to keep GraphqlContainer out of here is difficult because there are a lot of common dependencies
+        exclude: [/\.map$/, /^manifest.*\.js$/, /skeleton.html$/],
         modifyURLPrefix: {
           '': '__PUBLIC_PATH__/'
         }
       }),
+      new MiniCssExtractPlugin({
+        filename: '[name]_[contenthash].css',
+        // name refers to the chunk name, which would create 1 copy for each chunk referencing the css
+        chunkFilename: '[contenthash].css'
+      }),
+      new webpack.optimize.MinChunkSizePlugin({
+        // Too many and the extra size from the boostrapping causes bloat
+        // Too few & untouched modules will get invalidated between versions
+        // e.g. 100_000 -> 3.5MB bundle. 1_000 -> 4.05MB. That's a 550KB gzipped savings!
+        minChunkSize: 100_000
+      }),
       isStats && new BundleAnalyzerPlugin({generateStatsFile: true})
     ].filter(Boolean),
     module: {
@@ -192,18 +200,15 @@ module.exports = (config) => {
         {test: /\.flow$/, loader: 'ignore-loader'},
         {
           test: /\.css$/,
-          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
+          use: [
+            MiniCssExtractPlugin.loader,
+            {loader: 'css-loader', options: {sourceMap: false}},
+            'postcss-loader'
+          ]
         },
         {
           test: /\.(png|jpg|jpeg|gif|svg)$/,
-          use: [
-            {
-              loader: 'url-loader',
-              options: {
-                limit: 4096
-              }
-            }
-          ]
+          type: 'asset/resource'
         },
         // for graphiql, since graphql uses mjs files to run in the server
         {
@@ -213,7 +218,7 @@ module.exports = (config) => {
         },
         {
           test: /\.(eot|ttf|wav|mp3|woff|woff2|otf)$/,
-          use: ['file-loader']
+          type: 'asset/resource'
         }
       ]
     }

diff --git a/scripts/webpack/prod.servers.config.js b/scripts/webpack/prod.servers.config.js
@@ -95,6 +95,12 @@ module.exports = (config) => {
         })
     ].filter(Boolean),
     module: {
+      parser: {
+        javascript: {
+          // group all chunks into its entrypoint file
+          dynamicImportMode: 'eager'
+        }
+      },
       rules: [
         ...transformRules(PROJECT_ROOT, true),
         {
@@ -132,7 +138,8 @@ module.exports = (config) => {
                 {
                   loader: 'file-loader',
                   options: {
-                    publicPath: distPath
+                    publicPath: distPath,
+                    name: '[name].[ext]'
                   }
                 }
               ]

diff --git a/yarn.lock b/yarn.lock
@@ -8510,6 +8510,85 @@
     magic-string "^0.25.0"
     string.prototype.matchall "^4.0.6"
 
+"@swc/[email protected]":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.3.96.tgz#7c1c4245ce3f160a5b36a48ed071e3061a839e1d"
+  integrity sha512-8hzgXYVd85hfPh6mJ9yrG26rhgzCmcLO0h1TIl8U31hwmTbfZLzRitFQ/kqMJNbIBCwmNH1RU2QcJnL3d7f69A==
+
+"@swc/[email protected]":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.3.96.tgz#4720ff897ca3f22fe77d0be688968161480c80f0"
+  integrity sha512-mFp9GFfuPg+43vlAdQZl0WZpZSE8sEzqL7sr/7Reul5McUHP0BaLsEzwjvD035ESfkY8GBZdLpMinblIbFNljQ==
+
+"@swc/[email protected]":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.3.96.tgz#2c238ae00b13918ac058b132a31dc57dbcf94e39"
+  integrity sha512-8UEKkYJP4c8YzYIY/LlbSo8z5Obj4hqcv/fUTHiEePiGsOddgGf7AWjh56u7IoN/0uEmEro59nc1ChFXqXSGyg==
+
+"@swc/[email protected]":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.3.96.tgz#be2e84506b9761b561fb9a341e587f8594a8e55d"
+  integrity sha512-c/IiJ0s1y3Ymm2BTpyC/xr6gOvoqAVETrivVXHq68xgNms95luSpbYQ28rqaZC8bQC8M5zdXpSc0T8DJu8RJGw==
+
+"@swc/[email protected]":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.3.96.tgz#22c9ce17bd923ae358760e668ca33c90210c2ae5"
+  integrity sha512-i5/UTUwmJLri7zhtF6SAo/4QDQJDH2fhYJaBIUhrICmIkRO/ltURmpejqxsM/ye9Jqv5zG7VszMC0v/GYn/7BQ==
+
+"@swc/[email protected]":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.3.96.tgz#c17c072e338341c0ac3507a31ab2a36d16d79c98"
+  integrity sha512-USdaZu8lTIkm4Yf9cogct/j5eqtdZqTgcTib4I+NloUW0E/hySou3eSyp3V2UAA1qyuC72ld1otXuyKBna0YKQ==
+
+"@swc/[email protected]":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.3.96.tgz#eb74594a48b4e9cabdce7f5525b3b946f8d6dd16"
+  integrity sha512-QYErutd+G2SNaCinUVobfL7jWWjGTI0QEoQ6hqTp7PxCJS/dmKmj3C5ZkvxRYcq7XcZt7ovrYCTwPTHzt6lZBg==
+
+"@swc/[email protected]":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.3.96.tgz#6f7c0d20d80534b0676dc6761904288c16e93857"
+  integrity sha512-hjGvvAduA3Un2cZ9iNP4xvTXOO4jL3G9iakhFsgVhpkU73SGmK7+LN8ZVBEu4oq2SUcHO6caWvnZ881cxGuSpg==
+
+"@swc/[email protected]":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.3.96.tgz#47bb24ef2e4c81407a6786649246983cc69e7854"
+  integrity sha512-Far2hVFiwr+7VPCM2GxSmbh3ikTpM3pDombE+d69hkedvYHYZxtTF+2LTKl/sXtpbUnsoq7yV/32c9R/xaaWfw==
+
+"@swc/[email protected]":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.3.96.tgz#c796e3df7afe2875d227c74add16a7d09c77d8bd"
+  integrity sha512-4VbSAniIu0ikLf5mBX81FsljnfqjoVGleEkCQv4+zRlyZtO3FHoDPkeLVoy6WRlj7tyrRcfUJ4mDdPkbfTO14g==
+
+"@swc/core@^1.3.96":
+  version "1.3.96"
+  resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.3.96.tgz#f04d58b227ceed2fee6617ce2cdddf21d0803f96"
+  integrity sha512-zwE3TLgoZwJfQygdv2SdCK9mRLYluwDOM53I+dT6Z5ZvrgVENmY3txvWDvduzkV+/8IuvrRbVezMpxcojadRdQ==
+  dependencies:
+    "@swc/counter" "^0.1.1"
+    "@swc/types" "^0.1.5"
+  optionalDependencies:
+    "@swc/core-darwin-arm64" "1.3.96"
+    "@swc/core-darwin-x64" "1.3.96"
+    "@swc/core-linux-arm-gnueabihf" "1.3.96"
+    "@swc/core-linux-arm64-gnu" "1.3.96"
+    "@swc/core-linux-arm64-musl" "1.3.96"
+    "@swc/core-linux-x64-gnu" "1.3.96"
+    "@swc/core-linux-x64-musl" "1.3.96"
+    "@swc/core-win32-arm64-msvc" "1.3.96"
+    "@swc/core-win32-ia32-msvc" "1.3.96"
+    "@swc/core-win32-x64-msvc" "1.3.96"
+
+"@swc/counter@^0.1.1":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.2.tgz#bf06d0770e47c6f1102270b744e17b934586985e"
+  integrity sha512-9F4ys4C74eSTEUNndnER3VJ15oru2NumfQxS8geE+f3eB5xvfxpWyqE5XlVnxb/R14uoXi6SLbBwwiDSkv+XEw==
+
+"@swc/types@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.5.tgz#043b731d4f56a79b4897a3de1af35e75d56bc63a"
+  integrity sha512-myfUej5naTBWnqOCc/MdVOLVjXUXtIA+NpDrDBKJtLLg2shUjBu3cZmB/85RyitKc55+lUUyl7oRfLOvkr2hsw==
+
 "@tailwindcss/container-queries@^0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@tailwindcss/container-queries/-/container-queries-0.1.0.tgz#f3f0409893774f046ab2da1efd8a13105d21ec01"
@@ -9958,11 +10037,6 @@ acorn-globals@^7.0.0:
     acorn "^8.1.0"
     acorn-walk "^8.0.2"
 
-acorn-import-assertions@^1.7.6:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz#ba2b5939ce62c238db6d93d81c9b111b29b855e9"
-  integrity sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==
-
 acorn-import-assertions@^1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
@@ -12993,10 +13067,10 @@ enhanced-resolve@^5.0.0:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
-enhanced-resolve@^5.13.0:
-  version "5.13.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.13.0.tgz#26d1ecc448c02de997133217b5c1053f34a0a275"
-  integrity "sha1-JtHsxEjALemXEzIXtcEFPzSgonU= sha512-eyV8f0y1+bzyfh8xAwW/WTSZpLbjhqc4ne9eGSH4Zo2ejdyiNG9pU6mf9DG8a7+Auk6MFTlNOT4Y2y/9k8GKVg=="
+enhanced-resolve@^5.15.0:
+  version "5.15.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
+  integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -21189,10 +21263,10 @@ schema-utils@^3.0.0, schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-schema-utils@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.2.tgz#36c10abca6f7577aeae136c804b0c741edeadc99"
-  integrity "sha1-NsEKvKb3V3rq4TbIBLDHQe3q3Jk= sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg=="
+schema-utils@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
+  integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
   dependencies:
     "@types/json-schema" "^7.0.8"
     ajv "^6.12.5"
@@ -23686,21 +23760,21 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.81.0:
-  version "5.81.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.81.0.tgz#27a2e8466c8b4820d800a8d90f06ef98294f9956"
-  integrity sha512-AAjaJ9S4hYCVODKLQTgG5p5e11hiMawBwV2v8MYLE0C/6UAGLuAF4n1qa9GOwdxnicaP+5k6M5HrLmD4+gIB8Q==
+webpack@^5.89.0:
+  version "5.89.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.89.0.tgz#56b8bf9a34356e93a6625770006490bf3a7f32dc"
+  integrity sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^1.0.0"
     "@webassemblyjs/ast" "^1.11.5"
     "@webassemblyjs/wasm-edit" "^1.11.5"
     "@webassemblyjs/wasm-parser" "^1.11.5"
     acorn "^8.7.1"
-    acorn-import-assertions "^1.7.6"
+    acorn-import-assertions "^1.9.0"
     browserslist "^4.14.5"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.13.0"
+    enhanced-resolve "^5.15.0"
     es-module-lexer "^1.2.1"
     eslint-scope "5.1.1"
     events "^3.2.0"
@@ -23710,7 +23784,7 @@ webpack@^5.81.0:
     loader-runner "^4.2.0"
     mime-types "^2.1.27"
     neo-async "^2.6.2"
-    schema-utils "^3.1.2"
+    schema-utils "^3.2.0"
     tapable "^2.1.1"
     terser-webpack-plugin "^5.3.7"
     watchpack "^2.4.0"