diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index e648d9142c..f2035a3d5f 100644 --- a/.github/workflows/test.yml +++ b/.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: diff --git a/craco.config.cjs b/craco.config.cjs index f246ecbf7b..525e4840c0 100644 --- a/craco.config.cjs +++ b/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 }, }, diff --git a/package.json b/package.json index 753f2b9725..56fb6b0c63 100644 --- a/package.json +++ b/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" diff --git a/scripts/test-size.js b/scripts/test-size.js deleted file mode 100644 index f61aa80e39..0000000000 --- a/scripts/test-size.js +++ /dev/null @@ -1,56 +0,0 @@ -/* 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 ..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) -}