build: utilize the node_modules/.cache (#6364)

* build: add caching to eslint

* build: add caching to jest

* build: add caching to tsc

* build: add caching to actions

* fix: upgrade upload-artifact to v3

* build: update craco eslint cacheLocation

* fix: pr nits

.github/actions/setup/action.yml

 name: Setup
+description: checkout repo, setup node, and install node_modules
+
 runs:
   using: composite
   steps:
@@ -10,12 +12,14 @@ runs:
         registry-url: https://registry.npmjs.org
         cache: yarn
 
+    # node_modules/.cache is intentionally omitted, as this is used for build tool caches.
     - uses: actions/cache@v3
       id: install-cache
       with:
-        path: node_modules/
+        path: |
+          node_modules
+          !node_modules/.cache
         key: ${{ runner.os }}-install-${{ hashFiles('**/yarn.lock') }}
-
     - if: steps.install-cache.outputs.cache-hit != 'true'
       run: yarn install --frozen-lockfile --ignore-scripts
       shell: bash

.github/workflows/test.yml

 name: Test
 
+# Many build steps have their own caches, so each job has its own cache to improve subsequent build times.
+# Build tools are configured to cache cache to node_modules/.cache, so this is cached independently of node_modules.
+# See https://jongleberry.medium.com/speed-up-your-ci-and-dx-with-node-modules-cache-ac8df82b7bb0.
+
 on:
   push:
     branches:
@@ -14,6 +18,12 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
+      - uses: actions/cache@v3
+        id: eslint-cache
+        with:
+          path: node_modules/.cache
+          key: ${{ runner.os }}-eslint-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-eslint-${{ hashFiles('**/yarn.lock') }}-
       - run: yarn lint
   
   typecheck:
@@ -21,6 +31,12 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
+      - uses: actions/cache@v3
+        id: tsc-cache
+        with:
+          path: node_modules/.cache
+          key: ${{ runner.os }}-tsc-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-tsc-${{ hashFiles('**/yarn.lock') }}-
       - run: yarn prepare
       - run: yarn typecheck
 
@@ -36,6 +52,12 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
+      - uses: actions/cache@v3
+        id: jest-cache
+        with:
+          path: node_modules/.cache
+          key: ${{ runner.os }}-jest-${{ hashFiles('**/yarn.lock') }}-${{ github.run_id }}
+          restore-keys: ${{ runner.os }}-jest-${{ hashFiles('**/yarn.lock') }}-
       - run: yarn prepare
       - run: yarn test
       - uses: codecov/codecov-action@v3
@@ -49,9 +71,15 @@ jobs:
     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@v2
+      - uses: actions/upload-artifact@v3
         with:
           name: build
           path: build
@@ -63,51 +91,38 @@ jobs:
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
-      - uses: actions/download-artifact@v2
+      - uses: actions/download-artifact@v3
         with:
           name: build
           path: build
       - run: yarn test:size
 
 
-  cypress-build:
+  cypress-test-matrix:
+    needs: [build]
     runs-on: ubuntu-latest
     container: cypress/browsers:node-18.14.1-chrome-111.0.5563.64-1-ff-111.0-edge-111.0.1661.43-1
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [1, 2, 3, 4]
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/setup
+
       - uses: actions/cache@v3
         id: cypress-cache
         with:
           path: /root/.cache/Cypress
-          key: ${{ runner.os }}-cypress-${{ hashFiles('yarn.lock') }}
-      - if: steps.cypress-cache.outputs.cache-hit != 'true'
-        run: |
+          key: ${{ runner.os }}-cypress
+      - run: |
           yarn cypress install
           yarn cypress info
 
-  cypress-test-matrix:
-    needs: [build, cypress-build]
-    runs-on: ubuntu-latest
-    container: cypress/browsers:node-18.14.1-chrome-111.0.5563.64-1-ff-111.0-edge-111.0.1661.43-1
-    strategy:
-      fail-fast: false
-      matrix:
-        containers: [1, 2, 3, 4]
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/setup
-      - uses: actions/download-artifact@v2
+      - uses: actions/download-artifact@v3
         with:
           name: build
           path: build
-      - uses: actions/cache@v3
-        id: cypress-cache
-        with:
-          path: /root/.cache/Cypress
-          key: ${{ runner.os }}-cypress-${{ hashFiles('yarn.lock') }}
-      - if: steps.cypress-cache.outputs.cache-hit != 'true'
-        run: yarn cypress install
 
       - uses: cypress-io/github-action@v4
         with:

craco.config.cjs

 /* eslint-env node */
 const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin')
 const { execSync } = require('child_process')
-const EsLintWebpackPlugin = require('eslint-webpack-plugin')
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const { DefinePlugin } = require('webpack')
 
-const isProduction = process.env.NODE_ENV === 'production'
 const commitHash = execSync('git rev-parse HEAD').toString().trim()
+const isProduction = process.env.NODE_ENV === 'production'
+
+// Linting and type checking are only necessary as part of development and testing.
+// Omit them from production builds, as they slow down the feedback loop.
+const shouldLintOrTypeCheck = !isProduction
 
 module.exports = {
   babel: {
@@ -21,9 +23,22 @@ module.exports = {
       },
     },
   },
+  eslint: {
+    enable: shouldLintOrTypeCheck,
+    pluginOptions(eslintConfig) {
+      return Object.assign(eslintConfig, {
+        cache: true,
+        cacheLocation: 'node_modules/.cache/eslint/',
+      })
+    },
+  },
+  typescript: {
+    enableTypeChecking: shouldLintOrTypeCheck,
+  },
   jest: {
     configure(jestConfig) {
-      return Object.assign({}, jestConfig, {
+      return Object.assign(jestConfig, {
+        cacheDirectory: 'node_modules/.cache/jest',
         transformIgnorePatterns: ['@uniswap/conedison/format', '@uniswap/conedison/provider'],
         moduleNameMapper: {
           '@uniswap/conedison/format': '@uniswap/conedison/dist/format',
@@ -35,34 +50,23 @@ module.exports = {
   webpack: {
     plugins: [new VanillaExtractPlugin({ identifiers: 'short' })],
     configure: (webpackConfig) => {
-      webpackConfig.plugins = webpackConfig.plugins
-        .filter((plugin) => {
-          // Type checking and linting are only necessary as part of development and testing.
-          // Omit them from production builds, as they slow down the feedback loop.
-          if (isProduction) {
-            if (plugin instanceof ForkTsCheckerWebpackPlugin) return false
-            if (plugin instanceof EsLintWebpackPlugin) return false
-          }
+      webpackConfig.plugins = webpackConfig.plugins.map((plugin) => {
+        // Extend process.env with dynamic values (eg commit hash).
+        // This will make dynamic values available to JavaScript only, not to interpolated HTML (ie index.html).
+        if (plugin instanceof DefinePlugin) {
+          Object.assign(plugin.definitions['process.env'], {
+            REACT_APP_GIT_COMMIT_HASH: JSON.stringify(commitHash),
+          })
+        }
 
-          return true
-        })
-        .map((plugin) => {
-          // Extend process.env with dynamic values (eg commit hash).
-          // This will make dynamic values available to JavaScript only, not to interpolated HTML (ie index.html).
-          if (plugin instanceof DefinePlugin) {
-            Object.assign(plugin.definitions['process.env'], {
-              REACT_APP_GIT_COMMIT_HASH: JSON.stringify(commitHash),
-            })
-          }
+        // CSS ordering is mitigated through scoping / naming conventions, so we can ignore order warnings.
+        // See https://webpack.js.org/plugins/mini-css-extract-plugin/#remove-order-warnings.
+        if (plugin instanceof MiniCssExtractPlugin) {
+          plugin.options.ignoreOrder = true
+        }
 
-          // CSS ordering is mitigated through scoping / naming conventions, so we can ignore order warnings.
-          // See https://webpack.js.org/plugins/mini-css-extract-plugin/#remove-order-warnings.
-          if (plugin instanceof MiniCssExtractPlugin) {
-            plugin.options.ignoreOrder = true
-          }
-
-          return plugin
-        })
+        return plugin
+      })
 
       // We're currently on Webpack 4.x which doesn't support the `exports` field in package.json.
       // Instead, we need to manually map the import path to the correct exports path (eg dist or build folder).

package.json

@@ -21,7 +21,7 @@
     "start": "craco start",
     "build": "craco build",
     "serve": "serve build -l 3000",
-    "lint": "yarn eslint --ignore-path .gitignore .",
+    "lint": "yarn eslint --ignore-path .gitignore --cache --cache-location node_modules/.cache/eslint/ .",
     "typecheck": "tsc --noEmit",
     "test": "craco test --coverage",
     "test:size": "node scripts/test-size.js",
@@ -100,7 +100,7 @@
     "@uniswap/eslint-config": "^1.1.1",
     "@vanilla-extract/babel-plugin": "^1.1.7",
     "@vanilla-extract/webpack-plugin": "^2.1.11",
-    "cypress": "^10.3.1",
+    "cypress": "10.3.1",
     "env-cmd": "^10.1.0",
     "eslint": "^7.11.0",
     "jest-fetch-mock": "^3.0.3",

tsconfig.json

@@ -4,6 +4,7 @@
     "allowSyntheticDefaultImports": true,
     "alwaysStrict": true,
     "baseUrl": "src",
+    "composite": true,
     "downlevelIteration": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
@@ -23,9 +24,10 @@
     "strict": true,
     "strictNullChecks": true,
     "target": "es5",
+    "tsBuildInfoFile": "node_modules/.cache/.tsbuildinfo",
     "types": ["jest"],
     "useUnknownInCatchVariables": false
   },
   "exclude": ["node_modules", "cypress"],
-  "include": ["src/**/*"]
+  "include": ["src/**/*", "src/**/*.json"]
 }

yarn.lock

@@ -8320,7 +8320,7 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
-cypress@*, cypress@^10.3.1:
+cypress@*, cypress@10.3.1:
   version "10.3.1"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.3.1.tgz#7fab4ef43481c05a9a17ebe9a0ec860e15b95a19"
   integrity sha512-As9HrExjAgpgjCnbiQCuPdw5sWKx5HUJcK2EOKziu642akwufr/GUeqL5UnCPYXTyyibvEdWT/pSC2qnGW/e5w==