Add webpackChunkName for dynamic imports [feat]

overlookjs · Oct 3, 2020 · 19cca84 · 19cca84
1 parent be1c59b
commit 19cca84
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/lib/createRouter.js b/lib/createRouter.js
@@ -27,7 +27,7 @@ module.exports = function createRouter(routes) {
 		const routeVarName = `Route${index}`;
 
 		if (isLazy) {
-			importsCode += `const ${routeVarName} = lazy(() => import(${stringify(file.path)}));\n`;
+			importsCode += `const ${routeVarName} = lazy(() => import(/* webpackChunkName: "${pathToChunkName(path, isWildcard)}" */ ${stringify(file.path)}));\n`;
 			usesLazy = true;
 		} else {
 			importsCode += `import ${routeVarName} from ${stringify(file.path)};\n`;
@@ -47,3 +47,25 @@ module.exports = function createRouter(routes) {
 
 	return code;
 };
+
+/**
+ * Convert path to chunk name.
+ *
+ * `/` -> `routeRoot`
+ * `/foo/bar/qux` -> `routeFooBarQux`
+ *
+ * If `isWildcard` is true, prefix is 'router' instead of 'route'.
+ * Characters other than A-Z, a-z, 0-9 and '.' are replaced with '_'.
+ *
+ * @param {string} path - URL path
+ * @param {boolean} isWildcard - `true` if is wildcard match i.e. router
+ * @returns {string} - Chunk name
+ */
+function pathToChunkName(path, isWildcard) {
+	const prefix = isWildcard ? 'router' : 'route';
+	const name = path === '/'
+		? 'Root'
+		: path.replace(/\/(.)/g, (_, c) => c.toUpperCase())
+			.replace(/[^A-Za-z0-9_.]/g, '_');
+	return `${prefix}${name}`;
+}
diff --git a/test/init.test.js b/test/init.test.js
@@ -354,12 +354,12 @@ describe('Init', () => {
 				expect(file.content.trim().split(/\n+/)).toEqual([
 					expect.stringMatching(/^import React, \{lazy\} from "[^"]+";$/),
 					expect.stringMatching(/^import \{Switch\} from "[^"]+";$/),
-					'const Route0 = lazy(() => import("/index.jsx"));',
-					'const Route1 = lazy(() => import("/child1.jsx"));',
+					'const Route0 = lazy(() => import(/* webpackChunkName: "routeRoot" */ "/index.jsx"));',
+					'const Route1 = lazy(() => import(/* webpackChunkName: "routeChild1" */ "/child1.jsx"));',
 					'import Route2 from "/child2.jsx";',
-					'const Route3 = lazy(() => import("/child1OfChild1.jsx"));',
+					'const Route3 = lazy(() => import(/* webpackChunkName: "routeChild1Child1OfChild1" */ "/child1OfChild1.jsx"));',
 					'import Route4 from "/child2OfChild1.jsx";',
-					'const Route5 = lazy(() => import("?/childRouter1.router.jsx"));',
+					'const Route5 = lazy(() => import(/* webpackChunkName: "routerChildRouter1" */ "?/childRouter1.router.jsx"));',
 					'import Route6 from "?/childRouter2.router.jsx";',
 					'export default () => (',
 					'  <Switch>',
@@ -382,8 +382,8 @@ describe('Init', () => {
 				expect(file.content.trim().split(/\n+/)).toEqual([
 					expect.stringMatching(/^import React, \{lazy\} from "[^"]+";$/),
 					expect.stringMatching(/^import \{Switch\} from "[^"]+";$/),
-					'const Route0 = lazy(() => import("/childRouter1.jsx"));',
-					'const Route1 = lazy(() => import("/child1OfChildRouter1.jsx"));',
+					'const Route0 = lazy(() => import(/* webpackChunkName: "routeChildRouter1" */ "/childRouter1.jsx"));',
+					'const Route1 = lazy(() => import(/* webpackChunkName: "routeChildRouter1Child1OfChildRouter1" */ "/child1OfChildRouter1.jsx"));',
 					'import Route2 from "/child2OfChildRouter1.jsx";',
 					'export default () => (',
 					'  <Switch>',
@@ -402,7 +402,7 @@ describe('Init', () => {
 				expect(file.content.trim().split(/\n+/)).toEqual([
 					expect.stringMatching(/^import React, \{lazy\} from "[^"]+";$/),
 					expect.stringMatching(/^import \{Switch\} from "[^"]+";$/),
-					'const Route0 = lazy(() => import("/childRouter2.jsx"));',
+					'const Route0 = lazy(() => import(/* webpackChunkName: "routeChildRouter2" */ "/childRouter2.jsx"));',
 					'export default () => (',
 					'  <Switch>',
 					'    <Route path="/childRouter2" exact><Route0 /></Route>',