feat: chunk-optmization, script to swipe out remote-script

apps/landing/package.json

@@ -1,30 +1,30 @@
 {
-    "name": "@walless/landing",
-    "version": "0.0.1",
-    "private": true,
-    "scripts": {
-        "dev": "next dev -p 3005",
-        "build": "next build",
-        "start": "next start",
-        "lint": "next lint",
-        "lint:fix": "next lint --fix"
-    },
-    "dependencies": {
-        "@tamagui/animations-css": "1.15.16",
-        "@tamagui/next-theme": "1.15.16",
-        "@walless/gui": "*",
-        "@walless/markdown": "*",
-        "@walless/ui": "*",
-        "firebase": "10.5.0",
-        "html-to-image": "^1.11.11",
-        "next": "13.4.9",
-        "react-dom": "^18.2.0",
-        "valtio": "1.10.5"
-    },
-    "devDependencies": {
-        "@tamagui/next-plugin": "1.15.16",
-        "eslint": "8.38.0",
-        "next-compose-plugins": "^2.2.1",
-        "next-transpile-modules": "10.0.0"
-    }
+  "name": "@walless/landing",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3005",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix"
+  },
+  "dependencies": {
+    "@tamagui/animations-css": "1.15.16",
+    "@tamagui/next-theme": "1.15.16",
+    "@walless/gui": "*",
+    "@walless/markdown": "*",
+    "@walless/ui": "*",
+    "firebase": "10.7.0",
+    "html-to-image": "^1.11.11",
+    "next": "13.4.9",
+    "react-dom": "^18.2.0",
+    "valtio": "1.10.5"
+  },
+  "devDependencies": {
+    "@tamagui/next-plugin": "1.15.16",
+    "eslint": "8.38.0",
+    "next-compose-plugins": "^2.2.1",
+    "next-transpile-modules": "10.0.0"
+  }
 }

apps/web/metacraft.config.js

@@ -1,41 +1,37 @@
 const { web3Polyfills } = require('@metacraft/cli-web3-polyfills');
 const { copyAssets } = require('../../tool/webpack/asset');
-const { useCache } = require('../../tool/webpack/optimization');
 const { setEnvironments } = require('../../tool/webpack/env');
 
 const isProd = process.env.ENV === 'production';
 const isExtension = process.env.BUILD_TARGET === 'extension';
 
 const injectEntries = (config) => {
-	config.entry.content = {
-		import: 'scripts/content/index.ts',
-		filename: 'content.js',
-	};
-
-	config.entry.injection = {
-		import: 'scripts/content/injection.ts',
-		filename: 'injection.js',
-	};
-
-	config.entry.background = {
-		import: 'scripts/background/index.ts',
-		filename: 'background.js',
-	};
+	if (isExtension) {
+		config.entry.content = {
+			import: 'scripts/content/index.ts',
+			filename: 'content.js',
+		};
 
-	config.entry.kernel = {
-		import: 'scripts/kernel/index.ts',
-		filename: 'kernel.js',
-	};
+		config.entry.injection = {
+			import: 'scripts/content/injection.ts',
+			filename: 'injection.js',
+		};
 
-	config.entry.w3ar = {
-		import: 'scripts/worker/w3a-response.ts',
-		filename: 'w3a-response.js',
-	};
+		config.entry.kernel = {
+			import: 'scripts/kernel/index.ts',
+			filename: 'kernel.js',
+		};
+	} else {
+		config.entry.w3ar = {
+			import: 'scripts/worker/w3a-response.ts',
+			filename: 'w3a-response.js',
+		};
 
-	config.entry.fcm = {
-		import: 'scripts/worker/fcm.ts',
-		filename: 'firebase-messaging-sw.js',
-	};
+		config.entry.fcm = {
+			import: 'scripts/worker/fcm.ts',
+			filename: 'firebase-messaging-sw.js',
+		};
+	}
 
 	return config;
 };
@@ -52,6 +48,22 @@ const registerExtFile = (config) => {
 	return config;
 };
 
+const buildOptimization = (config) => {
+	config.cache = {
+		type: 'filesystem',
+	};
+
+	config.optimization = {
+		splitChunks: {
+			chunks: (chunk) => {
+				return ['content', 'injection'].indexOf(chunk.name) < 0;
+			},
+		},
+	};
+
+	return config;
+};
+
 const swcOptions = () => ({
 	jsc: {
 		parser: {
@@ -96,7 +108,7 @@ module.exports = {
 	buildId: () => 'app',
 	swcOptions,
 	webpackMiddlewares: [
-		useCache,
+		buildOptimization,
 		copyAssets,
 		registerExtFile,
 		injectEntries,

apps/web/package.json

@@ -1,17 +1,19 @@
 {
   "name": "@walless/web",
-  "version": "1.0.3",
+  "version": "1.0.2",
   "private": true,
   "main": "index.web.js",
   "scripts": {
     "dev": "metacraft",
     "dev:ext": "BUILD_TARGET=extension && metacraft",
     "batch": "node ../../tool/batch",
     "build": "yarn build:ext && yarn build:web",
-    "build:web": "rimraf metacraft build && yarn batch && metacraft bundle",
+    "build:web": "rimraf metacraft builds && yarn batch && metacraft bundle",
     "build:ext": "BUILD_TARGET=extension && yarn build:web && node scripts/bundler",
+    "build:store": "BUILD_TARGET=extension && yarn build:web && yarn badlinks && node scripts/bundler",
     "lint": "eslint . --max-warnings=0 --ext .ts,.tsx",
     "lint:fix": "eslint . --fix --max-warnings=0 --ext .ts,.tsx",
+    "badlinks": "npx badlinks metacraft -r",
     "postinstall": "yarn batch"
   },
   "dependencies": {
@@ -38,7 +40,7 @@
     "bip39": "^3.1.0",
     "bn.js": "^5.2.1",
     "ed25519-hd-key": "^1.3.0",
-    "firebase": "10.5.0",
+    "firebase": "10.7.0",
     "graphql-request": "^6.1.0",
     "numeral": "^2.0.6",
     "pouchdb-adapter-http": "^8.0.1",

apps/web/scripts/background/index.ts

@@ -1,26 +1,3 @@
-const keepBackgroundAlive = () => {
-	const runtime = global.chrome?.runtime;
-	if (runtime) {
-		if (runtime?.id) {
-			// Keep Manifest V3 service worker alive
-			chrome.runtime.onInstalled.addListener(() => {
-				chrome.alarms.get('keep-alive', (a) => {
-					if (!a) {
-						chrome.alarms.create('keep-alive', { periodInMinutes: 0.1 });
-					}
-				});
-			});
-		}
-
-		// Add a noop listener to the alarm. Without this, the service worker seems
-		// to be deemed as idle by Chrome and will be killed after 30s.
-		chrome.alarms.onAlarm.addListener(() => {
-			Function.prototype();
-		});
-	}
-};
-
-keepBackgroundAlive();
 importScripts('kernel.js');
 
 export default {};

apps/web/scripts/bundler/index.js

@@ -1,7 +1,7 @@
 require('dotenv').config({ path: '.env.production' });
 
 const fs = require('fs-extra');
-const { readFileSync } = require('fs');
+const { readFileSync, readdirSync, writeFileSync } = require('fs');
 const archiver = require('archiver');
 const manifest = require('./manifest.json');
 const project = require('../../package.json');
@@ -30,6 +30,8 @@ const cloneExtensionBuild = async (platform, override = {}) => {
 	const indexTemplate = readFileSync('./metacraft/index.html', 'utf8');
 	const popupTemplate = indexTemplate.replace('<body>', '<body class="popup">');
 
+	makeBackgroundJs(['kernel.js']);
+
 	if (platform === 'chrome') {
 		mergedManifest.permissions = [...mergedManifest.permissions, 'gcm'];
 	}
@@ -52,6 +54,33 @@ const cloneExtensionBuild = async (platform, override = {}) => {
 	await zipDir(platform);
 };
 
+const isChunkFile = (name) => {
+	const [id, extension] = name.split('.');
+	return !isNaN(id) && extension === 'js';
+};
+
+const makeBackgroundJs = (entries) => {
+	const buildFiles = readdirSync('./metacraft');
+	const existed = buildFiles.find((i) => i === 'background.js');
+
+	if (!existed) {
+		let fileContent = '';
+		const chunkFiles = buildFiles.filter(isChunkFile);
+
+		for (const chunk of chunkFiles) {
+			fileContent += `importScripts('${chunk}');\n`;
+		}
+
+		for (const entry of entries) {
+			fileContent += `importScripts('${entry}');\n`;
+		}
+
+		writeFileSync('./metacraft/background.js', fileContent, {
+			encoding: 'utf-8',
+		});
+	}
+};
+
 cloneExtensionBuild('chrome');
 cloneExtensionBuild('edge');
 cloneExtensionBuild('brave');

apps/web/scripts/kernel/index.ts

@@ -1,15 +1,18 @@
 import { runtime } from '@walless/core';
 
+import { keepBackgroundAlive } from './utils/extension';
 import { injectModules } from './utils/ioc';
 import { initializeMessaging } from './messaging';
 import { configurePWA } from './pwa';
 
-console.log(new Date().toISOString(), 'initializing kernel..');
+console.log(new Date().toISOString(), 'Initializing kernel..');
 
 injectModules().then(async () => {
 	await Promise.all([initializeMessaging()]);
 });
 
-if (!runtime.isExtension) {
+if (runtime.isExtension) {
+	keepBackgroundAlive();
+} else {
 	configurePWA();
 }

apps/web/scripts/kernel/utils/extension.ts

@@ -0,0 +1,22 @@
+const runtime = global.chrome?.runtime;
+
+export const keepBackgroundAlive = () => {
+	if (runtime) {
+		if (runtime?.id) {
+			// Keep Manifest V3 service worker alive
+			chrome.runtime.onInstalled.addListener(() => {
+				chrome.alarms.get('keep-alive', (a) => {
+					if (!a) {
+						chrome.alarms.create('keep-alive', { periodInMinutes: 0.1 });
+					}
+				});
+			});
+		}
+
+		// Add a noop listener to the alarm. Without this, the service worker seems
+		// to be deemed as idle by Chrome and will be killed after 30s.
+		chrome.alarms.onAlarm.addListener(() => {
+			Function.prototype();
+		});
+	}
+};