build: cap chunk size to 5MB (#6479)

* build: cap chunk size to 5MB

* test: rm size-tests

.github/workflows/test.yml

@@ -67,37 +67,6 @@ jobs:
           verbose: true
           flags: unit-tests
 
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/setup
-      - uses: actions/cache@v3
-        id: build-cache
-        with:
-          path: node_modules/.cache
-          key: ${{ runner.os }}-build-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
-          restore-keys: ${{ runner.os }}-build-${{ hashFiles('**/yarn.lock') }}-
-      - run: yarn prepare
-      - run: yarn build
-      - uses: actions/upload-artifact@v3
-        with:
-          name: build
-          path: build
-          if-no-files-found: error
-
-  size-tests:
-    needs: [build]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/setup
-      - uses: actions/download-artifact@v3
-        with:
-          name: build
-          path: build
-      - run: yarn test:size
-
   build-e2e:
     runs-on: ubuntu-latest
     steps:

craco.config.cjs

@@ -105,6 +105,15 @@ module.exports = {
       // See https://github.com/webpack/webpack/issues/9509.
       webpackConfig.resolve.alias['@uniswap/conedison'] = '@uniswap/conedison/dist'
 
+      // Configure webpack optimization:
+      webpackConfig.optimization.splitChunks = Object.assign(webpackConfig.optimization.splitChunks, {
+        // Cap the chunk size to 5MB.
+        // react-scripts suggests a chunk size under 1MB after gzip, but we can only measure maxSize before gzip.
+        // react-scripts also caps cacheable chunks at 5MB, which gzips to below 1MB, so we cap chunk size there.
+        // See https://github.com/facebook/create-react-app/blob/d960b9e/packages/react-scripts/config/webpack.config.js#L713-L716.
+        maxSize: 5 * 1024 * 1024,
+      })
+
       return webpackConfig
     },
   },

package.json

@@ -25,7 +25,6 @@
     "lint": "yarn eslint --ignore-path .gitignore --cache --cache-location node_modules/.cache/eslint/ .",
     "typecheck": "tsc",
     "test": "craco test",
-    "test:size": "node scripts/test-size.js",
     "cypress:open": "cypress open --browser chrome --e2e",
     "cypress:run": "cypress run --browser chrome --e2e",
     "deduplicate": "yarn-deduplicate --strategy=highest"

scripts/test-size.js

-/* eslint-disable no-undef */
-const assert = require('assert')
-const chalk = require('chalk')
-const fs = require('fs')
-const gzipSize = require('gzip-size').sync
-const path = require('path')
-
-const buildDir = path.join(__dirname, '../build')
-
-let entrypoints
-try {
-  entrypoints = require(path.join(buildDir, 'asset-manifest.json')).entrypoints
-} catch (e) {
-  console.log(chalk.yellow('You must build first: `yarn build`'))
-  process.exit(1)
-}
-
-// The last recorded size for these assets, as reported by `yarn build`.
-const LAST_SIZE_MAIN_KB = 435
-
-// This is the async-loaded js, called <number>.<hash>.js, with a matching css file.
-const LAST_SIZE_ENTRY_KB = 1442
-
-const SIZE_TOLERANCE_KB = 10
-
-const jsEntrypoints = entrypoints.filter((entrypoint) => entrypoint.endsWith('js'))
-assert(jsEntrypoints.length === 3)
-
-let fail = false
-console.log('File sizes after gzip:\n')
-jsEntrypoints.forEach((entrypoint) => {
-  const name = entrypoint.match(/\/([\w\d-]*)\./)[1]
-  const size = gzipSize(fs.readFileSync(path.join(buildDir, entrypoint))) / 1024
-
-  let maxSize = LAST_SIZE_ENTRY_KB + SIZE_TOLERANCE_KB
-  if (name === 'runtime-main') {
-    return
-  } else if (name === 'main') {
-    maxSize = LAST_SIZE_MAIN_KB + SIZE_TOLERANCE_KB
-  }
-
-  const report = `\t${size.toFixed(2).padEnd(8)}kB\t${chalk.dim(
-    `max: ${maxSize.toFixed().padEnd(4)} kB`
-  )}\t${entrypoint}`
-  if (maxSize > size) {
-    console.log(chalk.green(report))
-  } else {
-    console.log(chalk.red(report), '\tdid you import an unnecessary dependency?')
-    fail = true
-  }
-})
-if (fail) {
-  console.log(chalk.yellow('\nOne or more of your files has grown too large.'))
-  console.log(chalk.yellow('Reduce the file size or update the size limit (in scripts/test-size.js)'))
-  process.exit(1)
-}