Automatic conversion of import statements into dynamic imports.

9 files changed, 124 insertions, 50 deletions

diff --git a/config/tsconfig.json b/config/tsconfig.json
index 5a41ca2..120bfcb 100644
--- a/config/tsconfig.json
+++ b/config/tsconfig.json
@@ -14,7 +14,7 @@
 		"moduleDetection": "force",
 		"baseUrl": "../",
 		"paths": {
-			"/shared/*": ["src/shared/*"]
+			"@/*": ["src/*"]
 		}
 	},
 	"exclude": [
diff --git a/config/webpack.config.js b/config/webpack.config.js
index baadc51..7a84e88 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -37,22 +37,20 @@ for (const scriptPath in scripts) {
 }
 
 for (const sharedModule of sharedModules) {
+	const sharedModuleNameHash = getFileNameHash(sharedModule);
 	sharedModuleEntries[sharedModule] = {
 		import: path.resolve(SOURCE_DIR, "shared", sharedModule),
-		filename: `shared/${sharedModule}.js`,
-		library: {
-			type: "module"
-		}
+		filename: `shared/${sharedModuleNameHash}.js`
 	};
-	sharedModuleExternals[`/shared/${sharedModule}`] = `/shared/${sharedModule}.js`;
+	sharedModuleExternals[`@/shared/${sharedModule}`] = `/shared/${sharedModuleNameHash}.js`;
 }
 
-const common = {
+const commonOptions = {
 	mode: "production",
 	resolve: {
 		extensions: [".ts", ".js"],
 		alias: {
-			"/shared": path.resolve(global.SOURCE_DIR, "shared")
+			"@": global.SOURCE_DIR
 		}
 	},
 	module: {
@@ -71,39 +69,59 @@ const common = {
 	}
 };
 
-module.exports = [
-	{
-		...common,
-		experiments: {
-			outputModule: true,
-			topLevelAwait: true
-		},
-		externals: sharedModuleExternals,
-		entry: uninjectedScriptEntries,
-		plugins: [
-			new CopyPlugin({
-				patterns: [{
-					from: path.resolve(ROOT_DIR, "static"),
-					to: "./"
-				}]
-			}),
-			new CreateManifestPlugin()
-		]
-	},
-	{
-		...common,
-		entry: injectedScriptEntries,
-		plugins: [
-			new InjectScriptPlugin(),
+const ecmaScriptModuleOptions = {
+	experiments: {
+		outputModule: true,
+		topLevelAwait: true
+	}
+};
+
+const uninjectedScriptConfiguration = {
+	...commonOptions,
+	...ecmaScriptModuleOptions,
+	entry: uninjectedScriptEntries,
+	plugins: [
+		new CopyPlugin({
+			patterns: [{
+				from: path.resolve(ROOT_DIR, "static"),
+				to: "./"
+			}]
+		}),
+		new CreateManifestPlugin()
+	],
+	module: {
+		rules: [
+			{
+				test: /\.(js|ts)$/,
+				loader: "./config/webpack/loader/dynamic-imports-loader"
+			},
+			...commonOptions.module.rules
 		]
-	},
-	{
-		...common,
-		externals: sharedModuleExternals,
-		experiments: {
-			outputModule: true,
-			topLevelAwait: true
-		},
-		entry: sharedModuleEntries
 	}
+};
+
+const injectedScriptConfiguration = {
+	...commonOptions,
+	entry: injectedScriptEntries,
+	plugins: [
+		new InjectScriptPlugin(),
+	]
+};
+
+const sharedModulesConfiguration = {
+	...commonOptions,
+	...ecmaScriptModuleOptions,
+	output: {
+		library: {
+			type: "module"
+		}
+	},
+	entry: sharedModuleEntries,
+	externals: sharedModuleExternals
+};
+
+module.exports = [
+	uninjectedScriptConfiguration,
+	injectedScriptConfiguration,
+	sharedModulesConfiguration
 ];
diff --git a/config/webpack/loader/dynamic-imports-loader.js b/config/webpack/loader/dynamic-imports-loader.js
new file mode 100644
index 0000000..06f9704
--- /dev/null
+++ b/config/webpack/loader/dynamic-imports-loader.js
@@ -0,0 +1,31 @@
+const { ImportManager } = require("import-manager");
+const { getFileNameHash } = webpackRequire("utils/file-name-hash");
+
+const sharedModules = webpackRequire("utils/shared-modules.js");
+
+module.exports = source => {
+	const manager = new ImportManager(source);
+
+	let modified = false;
+
+	for (const unit of manager.imports.es6.units) {
+		const moduleIndex = sharedModules.indexOf(unit.module.name);
+		if (moduleIndex >= 0 && unit.type === "es6") {
+			const importedModuleNames = unit.members.entities
+				.map(entity => `\t${entity.name}`)
+				.concat(unit.defaultMembers.entities.map(entity => `\tdefault: ${entity.name}`))
+				.join(",\n");
+
+			const importStatement = `const {\n${importedModuleNames}\n} = await import(/* webpackIgnore: true */ "/shared/${getFileNameHash(sharedModules[moduleIndex])}.js");\n`;
+
+			unit.methods = {
+				makeUntraceable() {}
+			};
+			manager.remove(unit);
+			manager.insertStatement(importStatement, "bottom", "dynamic");
+			modified = true;
+		}
+	}
+
+	return modified ? manager.code.toString() + "\nexport {};" : source;
+};
diff --git a/config/webpack/plugins/create-manifest-webpack-plugin/index.js b/config/webpack/plugins/create-manifest-webpack-plugin/index.js
index 77f5959..4ab363f 100644
--- a/config/webpack/plugins/create-manifest-webpack-plugin/index.js
+++ b/config/webpack/plugins/create-manifest-webpack-plugin/index.js
@@ -38,12 +38,14 @@ class CreateManifestPlugin {
 					const resources = [];
 
 					for (const assetName in assets) {
-						if (/^assets\/.*\.(jpg|png|gif)$/.test(assetName))
+						if (/^assets\/.*\.(jpg|png|gif)$/.test(assetName)) {
 							resources.push(assetName);
+						}
 					}
 
-					for (const sharedModule of sharedModules)
-						resources.push(`shared/${sharedModule}.js`);
+					for (const sharedModule of sharedModules) {
+						resources.push(`shared/${getFileNameHash(sharedModule)}.js`);
+					}
 
 					if (resources.length > 0) {
 						manifest.web_accessible_resources = [
diff --git a/package.json b/package.json
index 7d613a3..4cfb182 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
 		"@types/chrome": "^0.0.213",
 		"@types/jquery": "^3.5.16",
 		"copy-webpack-plugin": "^11.0.0",
+		"import-manager": "^0.3.3",
 		"terser": "^5.16.3",
 		"ts-loader": "^9.4.2",
 		"typescript": "^4.9.5",
diff --git a/src/scripts/functionality/home-page-banner.ts b/src/scripts/functionality/home-page-banner.ts
index 75069ca..7ac8fb5 100644
--- a/src/scripts/functionality/home-page-banner.ts
+++ b/src/scripts/functionality/home-page-banner.ts
@@ -1,4 +1,4 @@
-const { styles } = await import(/* webpackIgnore: true */ "/shared/styling.js");
+import { styles } from "@/shared/styling";
 
 styles("#slider", {
 	overflow: "visible",
diff --git a/src/scripts/optimize.ts b/src/scripts/optimize.ts
index 93dd0e2..c8125ee 100644
--- a/src/scripts/optimize.ts
+++ b/src/scripts/optimize.ts
@@ -1,4 +1,4 @@
-const { modifyDOM } = await import(/* webpackIgnore: true */ "/shared/modify-dom.js");
+import { modifyDOM } from "@/shared/modify-dom";
 
 modifyDOM([
 	["head > script:nth-child(34)", { src: null }],
diff --git a/src/shared/modify-dom.ts b/src/shared/modify-dom.ts
index 0832d5b..b3baffb 100644
--- a/src/shared/modify-dom.ts
+++ b/src/shared/modify-dom.ts
@@ -1,4 +1,4 @@
-import { observeDOM } from "/shared/observe-dom";
+import { observeDOM } from "@/shared/observe-dom";
 
 type DOMReplacements = {
 	innerHTML?: string;
diff --git a/yarn.lock b/yarn.lock
index f63da3b..0d5c32e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -34,7 +34,7 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10":
+"@jridgewell/sourcemap-codec@1.4.14", "@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.13":
   version "1.4.14"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
@@ -292,7 +292,12 @@ acorn-import-assertions@^1.7.6:
   resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz#ba2b5939ce62c238db6d93d81c9b111b29b855e9"
   integrity sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==
 
-acorn@^8.5.0, acorn@^8.7.1:
+acorn-walk@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
+acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.2:
   version "8.8.2"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
   integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
@@ -404,7 +409,7 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-colorette@^2.0.14:
+colorette@^2.0.14, colorette@^2.0.19:
   version "2.0.19"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
   integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
@@ -618,6 +623,16 @@ import-local@^3.0.2:
     pkg-dir "^4.2.0"
     resolve-cwd "^3.0.0"
 
+import-manager@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/import-manager/-/import-manager-0.3.3.tgz#81d373f3afcbc793d26c2cd3f367d9d73718acf3"
+  integrity sha512-24HG+yEe9zaMo7ltWnJMO381suXUi29OHi4kR7ecmDgoar8G+P0kPMf/692EWJKBkfY/DG/1zQZu47/T/DK7Hw==
+  dependencies:
+    acorn "^8.8.2"
+    acorn-walk "^8.2.0"
+    colorette "^2.0.19"
+    magic-string "^0.30.0"
+
 interpret@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
@@ -712,6 +727,13 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+magic-string@^0.30.0:
+  version "0.30.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.0.tgz#fd58a4748c5c4547338a424e90fa5dd17f4de529"
+  integrity sha512-LA+31JYDJLs82r2ScLrlz1GjSgu66ZV518eyWT+S8VhyQn/JL0u9MeBOvQMGYiPk1DBiSN9DDMOcXvigJZaViQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.13"
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"