Merge pull request #217 from BarthPaleologue/FasterWebpackBuild

config tweaks for speed
BarthPaleologue · Dec 17, 2024 · ba37a6e · ba37a6e
2 parents a5d97f8 + 7b4e7f9
commit ba37a6e
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 142 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -2,73 +2,73 @@
 name: Build & Deploy site to Pages
 
 on:
-  push:
-    tags:
-      - '*'
+    push:
+        tags:
+            - "*"
 
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
+    # Allows you to run this workflow manually from the Actions tab
+    workflow_dispatch:
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
-  contents: read
-  pages: write
-  id-token: write
+    contents: read
+    pages: write
+    id-token: write
 
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
-  cancel-in-progress: false
+    group: "pages"
+    cancel-in-progress: false
 
 jobs:
-  build-deploy:
-    timeout-minutes: 20
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: "20"
-      - name: Setup Pages
-        uses: actions/configure-pages@v3
-      - name: Restore cache
-        uses: actions/cache@v3
-        with:
-          path: |
-            .cache
-          # Generate a new cache whenever packages or source files change.
-          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
-          # If source files changed but packages didn't, rebuild from a prior cache.
-          restore-keys: |
-            ${{ runner.os }}-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
-      - name: Install pnpm
-        run: npm install -g pnpm
-      - name: Install dependencies
-        run: pnpm install
-      - name: Build with Webpack
-        run: pnpm run build
-      - name: Generate documentation
-        run: pnpm run docs
-      - name: debug
-        run: ls -la
-      - name: Move docs to dist
-        run: mv docs dist/docs
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
-        with:
-          path: ./dist
+    build-deploy:
+        timeout-minutes: 20
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+            - name: Setup Node
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "20"
+            - name: Setup Pages
+              uses: actions/configure-pages@v3
+            - name: Restore cache
+              uses: actions/cache@v3
+              with:
+                  path: |
+                      .cache
+                  # Generate a new cache whenever packages or source files change.
+                  key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+                  # If source files changed but packages didn't, rebuild from a prior cache.
+                  restore-keys: |
+                      ${{ runner.os }}-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+            - name: Install pnpm
+              run: npm install -g pnpm
+            - name: Install dependencies
+              run: pnpm install
+            - name: Build with Webpack
+              run: pnpm run build
+            - name: Generate documentation
+              run: pnpm run build:docs
+            - name: debug
+              run: ls -la
+            - name: Move docs to dist
+              run: mv docs dist/docs
+            - name: Upload artifact
+              uses: actions/upload-pages-artifact@v2
+              with:
+                  path: ./dist
 
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    needs: build
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v2
+    # Deployment job
+    deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+        runs-on: ubuntu-latest
+        needs: build
+        steps:
+            - name: Deploy to GitHub Pages
+              id: deployment
+              uses: actions/deploy-pages@v2
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ Planets are fully explorable from orbit down to the surface, and the universe is
 
 ## My vision for the project
 
-*Disclaimer: This vision for Cosmos Journeyer is a long-term guiding light and may not reflect the game’s current state. Development is ongoing, and there’s still a long way to go!*
+_Disclaimer: This vision for Cosmos Journeyer is a long-term guiding light and may not reflect the game’s current state. Development is ongoing, and there’s still a long way to go!_
 
 ### Themes and atmosphere
 
@@ -50,7 +50,7 @@ The gameplay experience is also designed to be relaxing. I plan to incorporate u
 
 ### Main tutorial
 
-Following the example set by the Great Plateau in *Zelda: Breath of the Wild*, the game begins in a self-contained star cluster that players cannot leave until they reach a specific milestone. This could be achieved by designing a star cluster that forms a disconnected graph, isolated from the rest of the universe through carefully chosen distances and a limited initial jump range.
+Following the example set by the Great Plateau in _Zelda: Breath of the Wild_, the game begins in a self-contained star cluster that players cannot leave until they reach a specific milestone. This could be achieved by designing a star cluster that forms a disconnected graph, isolated from the rest of the universe through carefully chosen distances and a limited initial jump range.
 
 This introductory star cluster would be fully handcrafted to make the best possible first impression on players. The story would guide them through significant locations in a logical sequence—such as space stations, a black hole, and a planet terminator—to introduce the narrative while also presenting mini-tutorials along the way.
 
@@ -105,7 +105,7 @@ The documentation is online at https://barthpaleologue.github.io/CosmosJourneyer
 Additionally, the [ARCHITECTURE.md](./ARCHITECTURE.md) file contains a big picture explanation of the architecture of
 the project.
 
-To build it locally, run `npm run docs` and then `npm run serve:docs` to serve it at `localhost:8081`.
+To build it locally, run `npm run build:docs` and then `npm run serve:docs` to serve it at `localhost:8081`.
 
 ## Roadmap
 
@@ -141,7 +141,7 @@ First, clone the repository and install the dependencies with `pnpm install`.
 
 To build the web version of Cosmos Journeyer, run `pnpm build`. Everything will be built in the `dist` folder.
 
-To start the production server version, run `pnpm serve:prod`. The development version can be started with `pnpm serve`. 
+To start the production server version, run `pnpm serve:prod`. The development version can be started with `pnpm serve`.
 
 ### Tauri
 

diff --git a/package.json b/package.json
@@ -1,75 +1,72 @@
 {
-  "devDependencies": {
-    "@babylonjs/core": "^7.38.0",
-    "@babylonjs/gui": "^7.38.0",
-    "@babylonjs/havok": "^1.3.10",
-    "@babylonjs/inspector": "^7.38.0",
-    "@babylonjs/loaders": "^7.38.0",
-    "@brianchirls/game-input": "^0.1.1",
-    "@eslint/compat": "^1.2.4",
-    "@eslint/eslintrc": "^3.2.0",
-    "@eslint/js": "^9.16.0",
-    "@tauri-apps/cli": "2.1.0",
-    "@types/d3": "^7.4.3",
-    "@types/jest": "^29.5.14",
-    "@types/seedrandom": "^3.0.8",
-    "@types/webpack": "^5.28.5",
-    "@types/webpack-env": "^1.18.5",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
-    "@webpack-cli/generators": "^3.0.7",
-    "cross-env": "^7.0.3",
-    "css-loader": "^7.1.2",
-    "d3": "^7.9.0",
-    "eslint": "^9.16.0",
-    "eslint-plugin-import": "^2.31.0",
-    "extended-random": "^1.2.2",
-    "fast-simplex-noise": "^4.0.0",
-    "globals": "^15.13.0",
-    "handle-sliderjs": "^1.3.1",
-    "html-loader": "^5.1.0",
-    "html-webpack-plugin": "^5.6.3",
-    "http-server": "^14.1.1",
-    "i18next": "^24.0.5",
-    "jest": "^29.7.0",
-    "mini-css-extract-plugin": "^2.9.2",
-    "prettier": "^3.4.2",
-    "raw-loader": "^4.0.2",
-    "sass": "^1.82.0",
-    "sass-loader": "^16.0.4",
-    "squirrel-noise": "^1.0.0",
-    "style-loader": "^4.0.0",
-    "terrain-generation": "^1.8.0",
-    "ts-jest": "^29.2.5",
-    "ts-loader": "^9.5.1",
-    "ts-node": "^10.9.2",
-    "ts-shader-loader": "^2.0.2",
-    "typedoc": "^0.27.3",
-    "typedoc-github-theme": "^0.2.0",
-    "typedoc-plugin-missing-exports": "^3.1.0",
-    "typescript": "~5.7.2",
-    "typescript-plugin-css-modules": "^5.1.0",
-    "webpack": "^5.97.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.1.0"
-  },
-  "version": "1.9.0",
-  "description": "Cosmos Journeyer is a space exploration game featuring fully explorable planets, across millions of star systems. It is built using Babylon.JS, and a lot of passion.",
-  "name": "cosmos-journeyer",
-  "scripts": {
-    "build": "webpack --mode=production --node-env=production",
-    "build:dev": "webpack --mode=development",
-    "build:prod": "webpack --mode=production --node-env=production",
-    "watch": "webpack --watch",
-    "serve": "webpack serve",
-    "serve:prod": "http-server dist -p 8080",
-    "format:check": "prettier --config .prettierrc src//**/*.{js,jsx,json,ts} --check",
-    "format": "prettier --config .prettierrc src//**/*.{js,json,ts} --write",
-    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules npx jest",
-    "test:coverage": "cross-env NODE_OPTIONS=--experimental-vm-modules npx jest --coverage",
-    "docs": "typedoc --options typedoc.json",
-    "serve:docs": "http-server docs -p 8081",
-    "lint:check": "eslint src/ts --config eslint.config.mjs",
-    "lint:fix": "eslint src/ts --fix --config eslint.config.mjs"
-  }
+    "devDependencies": {
+        "@babylonjs/core": "^7.38.0",
+        "@babylonjs/gui": "^7.38.0",
+        "@babylonjs/havok": "^1.3.10",
+        "@babylonjs/inspector": "^7.38.0",
+        "@babylonjs/loaders": "^7.38.0",
+        "@brianchirls/game-input": "^0.1.1",
+        "@eslint/compat": "^1.2.4",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "^9.16.0",
+        "@tauri-apps/cli": "2.1.0",
+        "@types/d3": "^7.4.3",
+        "@types/jest": "^29.5.14",
+        "@types/seedrandom": "^3.0.8",
+        "@types/webpack": "^5.28.5",
+        "@types/webpack-env": "^1.18.5",
+        "@typescript-eslint/eslint-plugin": "^8.17.0",
+        "@typescript-eslint/parser": "^8.17.0",
+        "@webpack-cli/generators": "^3.0.7",
+        "cross-env": "^7.0.3",
+        "css-loader": "^7.1.2",
+        "d3": "^7.9.0",
+        "eslint": "^9.16.0",
+        "eslint-plugin-import": "^2.31.0",
+        "extended-random": "^1.2.2",
+        "fast-simplex-noise": "^4.0.0",
+        "globals": "^15.13.0",
+        "handle-sliderjs": "^1.3.1",
+        "html-loader": "^5.1.0",
+        "html-webpack-plugin": "^5.6.3",
+        "http-server": "^14.1.1",
+        "i18next": "^24.0.5",
+        "jest": "^29.7.0",
+        "mini-css-extract-plugin": "^2.9.2",
+        "prettier": "^3.4.2",
+        "raw-loader": "^4.0.2",
+        "sass": "^1.82.0",
+        "sass-loader": "^16.0.4",
+        "squirrel-noise": "^1.0.0",
+        "style-loader": "^4.0.0",
+        "terrain-generation": "^1.8.0",
+        "ts-jest": "^29.2.5",
+        "ts-loader": "^9.5.1",
+        "ts-node": "^10.9.2",
+        "ts-shader-loader": "^2.0.2",
+        "typedoc": "^0.27.3",
+        "typedoc-github-theme": "^0.2.0",
+        "typedoc-plugin-missing-exports": "^3.1.0",
+        "typescript": "~5.7.2",
+        "typescript-plugin-css-modules": "^5.1.0",
+        "webpack": "^5.97.1",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.1.0"
+    },
+    "version": "1.9.0",
+    "description": "Cosmos Journeyer is a space exploration game featuring fully explorable planets, across millions of star systems. It is built using Babylon.JS, and a lot of passion.",
+    "name": "cosmos-journeyer",
+    "scripts": {
+        "build": "webpack --mode=production --node-env=production",
+        "serve": "webpack serve --progress",
+        "serve:prod": "http-server dist -p 8080",
+        "format:check": "prettier --config .prettierrc src//**/*.{js,jsx,json,ts} --check",
+        "format": "prettier --config .prettierrc src//**/*.{js,json,ts} --write",
+        "test": "cross-env NODE_OPTIONS=--experimental-vm-modules npx jest",
+        "test:coverage": "cross-env NODE_OPTIONS=--experimental-vm-modules npx jest --coverage",
+        "build:docs": "typedoc --options typedoc.json",
+        "serve:docs": "http-server docs -p 8081",
+        "lint:check": "eslint src/ts --config eslint.config.mjs",
+        "lint:fix": "eslint src/ts --fix --config eslint.config.mjs"
+    }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -29,7 +29,8 @@ const config = {
         headers: {
             "Cross-Origin-Opener-Policy": "same-origin",
             "Cross-Origin-Embedder-Policy": "same-origin"
-        }
+        },
+        compress: true
     },
 
     plugins: [
@@ -117,7 +118,9 @@ const config = {
             template: path.join(htmlPath, "emptyIndex.html"),
             chunks: ["debugAssets"]
         }),
-        new MiniCssExtractPlugin()
+        new MiniCssExtractPlugin({
+            filename: "[name].[contenthash].css"
+        })
     ],
 
     module: {
@@ -129,16 +132,19 @@ const config = {
             },
             {
                 test: /\.css$/i,
-                use: [MiniCssExtractPlugin.loader, "css-loader"]
+                use: [MiniCssExtractPlugin.loader, "css-loader"],
+                exclude: ["/node_modules/"]
             },
 
             {
                 test: /\.s[ac]ss$/i,
-                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
+                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+                exclude: ["/node_modules/"]
             },
             {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|webp|glb|obj|mp3|babylon|env|dds)$/i,
-                type: "asset"
+                type: "asset",
+                exclude: ["/node_modules/"]
             },
             {
                 test: /\.(glsl|vs|fs|vert|frag|fx)$/,
@@ -160,11 +166,36 @@ module.exports = () => {
         config.mode = "production";
     } else {
         config.mode = "development";
-        config.devtool = "source-map";
+        config.devtool = "eval-cheap-module-source-map";
     }
     config.experiments = {
         asyncWebAssembly: true,
         topLevelAwait: true
     };
+    // taken from https://webpack.js.org/plugins/split-chunks-plugin/
+    config.optimization = {
+        minimize: isProduction,
+        splitChunks: {
+            chunks: "async",
+            minSize: 20000,
+            minRemainingSize: 0,
+            minChunks: 1,
+            maxAsyncRequests: 30,
+            maxInitialRequests: 30,
+            enforceSizeThreshold: 50000,
+            cacheGroups: {
+                defaultVendors: {
+                    test: /[\\/]node_modules[\\/]/,
+                    priority: -10,
+                    reuseExistingChunk: true
+                },
+                default: {
+                    minChunks: 2,
+                    priority: -20,
+                    reuseExistingChunk: true
+                }
+            }
+        }
+    };
     return config;
 };