ci: try webpack cache (#6269)

* ci: try webpack cache

* Update .github/workflows/testing.yml

* Update webpack.prod.mjs

* Update package.json

* Update testing.yml

* Update deploy.yml

* fix: use `webpack.*.mjs`

* fix: cache key

* fix: use cache form common config

* Update deploy.yml

Author: snitin315

.github/workflows/deploy.yml

@@ -23,6 +23,16 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: yarn
 
+      - name: Enable webpack persistent caching
+        uses: actions/cache@v3
+        id: build-webpack-persistent-cache
+        with:
+          path: node_modules/.cache
+          key: build-${{ hashFiles('**/webpack.*.mjs') }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |-
+             build-${{ hashFiles('**/webpack.*.mjs') }}-${{ hashFiles('**/yarn.lock') }}
+             build-${{ hashFiles('**/webpack.*.mjs') }}-
+
       - run: yarn --frozen-lockfile
       - name: Build site
         run: yarn build

.github/workflows/testing.yml

@@ -58,6 +58,16 @@ jobs:
 
       - run: yarn
 
+      - name: Enable webpack persistent caching
+        uses: actions/cache@v3
+        id: build-webpack-persistent-cache
+        with:
+          path: node_modules/.cache
+          key: build-${{ hashFiles('**/webpack.*.mjs') }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |-
+            build-${{ hashFiles('**/webpack.*.mjs') }}-${{ hashFiles('**/yarn.lock') }}
+            build-${{ hashFiles('**/webpack.*.mjs') }}-
+
       - name: Build site
         run: yarn build
         env:
@@ -74,6 +84,16 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - name: Enable webpack persistent caching
+        uses: actions/cache@v3
+        id: build-webpack-persistent-cache
+        with:
+          path: node_modules/.cache
+          key: build-${{ hashFiles('**/webpack.*.mjs') }}-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |-
+            build-${{ hashFiles('**/webpack.*.mjs') }}-${{ hashFiles('**/yarn.lock') }}
+            build-${{ hashFiles('**/webpack.*.mjs') }}-
+
       - name: Cypress run
         uses: cypress-io/github-action@v4
         with:

package.json

@@ -56,7 +56,8 @@
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "prettier": "prettier --write '**/*.{js,json,jsx,css,scss,md,mdx}'",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "postinstall": "rimraf ./node_modules/.cache/webpack"
   },
   "lint-staged": {
     "*.{js,jsx,md,mdx}": [

webpack.common.mjs

@@ -55,7 +55,7 @@ export default ({ ssg = false }) => ({
     buildDependencies: {
       config: [__filename],
     },
-    cacheDirectory: path.resolve(__dirname, '.cache/webpack'),
+    cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/webpack')
   },
   resolve: {
     extensions: ['.js', '.jsx', '.scss'],

webpack.prod.mjs

@@ -15,11 +15,6 @@ import ProdAssetsManifest from './src/ProdAssetsManifest.mjs';
 export default (env) =>
   merge(common(env), {
     mode: 'production',
-    cache: {
-      buildDependencies: {
-        config: [__filename],
-      },
-    },
     entry: {
       index: {
         import: './index.jsx',

webpack.ssg.mjs

@@ -24,11 +24,6 @@ export default (env) =>
     name: 'ssg',
     mode: 'production',
     target: 'node',
-    cache: {
-      buildDependencies: {
-        config: [__filename],
-      },
-    },
     module: {
       parser: {
         javascript: {