Automatic conversion of import statements into dynamic imports.

4 files changed, 95 insertions, 44 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 = [