junk: Kinda works but not really

Author: rschristian

packages/cli/lib/lib/webpack/create-load-manifest.js

@@ -10,6 +10,19 @@ module.exports = (assets, namedChunkGroups, isProd) => {
 	 */
 	assets = JSON.parse(assets['asset-manifest.json']._value);
 
+	// Given a list of output chunks, we need some way to
+	// differentiate separate pages from an asynchronously loaded chunk.
+	//
+	// This (non-exhaustive) list is a best-guess attempt to do so.
+	const routePatterns = [
+		/^route-.*\.js$/,
+		/^routes-.*\.js$/,
+		/^page-.*\.js$/,
+		/^pages-.*\.js$/,
+		/^view-.*\.js$/,
+		/^views-.*\.js$/,
+	];
+
 	const mainJs = assets['bundle.js'];
 	const mainCss = assets['bundle.css'];
 
@@ -32,7 +45,12 @@ module.exports = (assets, namedChunkGroups, isProd) => {
 		};
 
 	Object.keys(assets)
-		.filter(asset => /^route-.*\.js$/.test(asset))
+		.filter(asset => {
+			for (const pattern of routePatterns) {
+				if (pattern.test(asset)) return true;
+			}
+			return false;
+		})
 		.map(asset => asset.replace(/\.js$/, ''))
 		.forEach(route => {
 			const routeManifest = Object.assign({}, defaults);
@@ -43,7 +61,7 @@ module.exports = (assets, namedChunkGroups, isProd) => {
 			routeManifest[routeJs] = { type: 'script', weight: 0.9 };
 			if (routeCss) routeManifest[routeCss] = { type: 'script', weight: 0.9 };
 
-			const path = route.replace(/^route-/, '/').replace(/^\/home/, '/');
+			const path = route.replace(/^.*-/, '/').replace(/^\/home/, '/');
 
 			if (namedChunkGroups) {
 				// async files to be loaded, generated by splitChunksPlugin

packages/cli/lib/lib/webpack/webpack-base-config.js

@@ -292,16 +292,9 @@ module.exports = function createBaseConfig(env) {
 			new MiniCssExtractPlugin({
 				filename:
 					isProd && !env.isServer ? '[name].[contenthash:5].css' : '[name].css',
-				chunkFilename: pathData => {
-					const chunkId = /** @type {string} */ (pathData.chunk.id);
-					const chunkName =
-						typeof chunkId === 'string'
-							? chunkId.split('_').slice(0, -1).join('-')
-							: chunkId;
-					return isProd
-						? `${chunkName}.chunk.[chunkhash:5].css`
-						: `${chunkName}.chunk.css`;
-				},
+				chunkFilename: isProd
+					? '[name].chunk.[contenthash:5].css'
+					: '[name].chunk.css',
 			}),
 			ProgressBarPlugin({
 				format:
@@ -328,7 +321,6 @@ module.exports = function createBaseConfig(env) {
 						},
 					},
 				}),
-			isProd && new webpack.LoaderOptionsPlugin({ minimize: true }),
 			new webpack.optimize.ModuleConcatenationPlugin(),
 
 			// strip out babel-helper invariant checks

packages/cli/lib/lib/webpack/webpack-client-config.js

@@ -24,6 +24,10 @@ const cleanFilename = name =>
 		''
 	);
 
+// TODO: Swap with the above when removing the async loader
+const cleanFilename2 = name =>
+	(name = name.replace(/_/g, '-').replace(/(-index|-[jt]sx?$)/, ''));
+
 /**
  * @returns {Promise<import('webpack').Configuration>}
  */
@@ -89,11 +93,7 @@ async function clientConfig(env) {
 				return env.isProd ? '[name].[chunkhash:5].js' : '[name].js';
 			},
 			chunkFilename: pathData => {
-				const chunkId = /** @type {string} */ (pathData.chunk.id);
-				const chunkName =
-					typeof chunkId === 'string'
-						? chunkId.split('_').slice(0, -1).join('-')
-						: chunkId;
+				const chunkName = cleanFilename2(pathData.chunk.id);
 				return env.isProd
 					? `${chunkName}.chunk.[chunkhash:5].js`
 					: `${chunkName}.chunk.js`;

packages/cli/tests/images/build.js

@@ -220,11 +220,11 @@ exports.pushManifest = `
 			"type":"script",
 			"weight":1
 		},
-		"route-home.chunk.\\w{5}.js":{
+		"routes-home.chunk.\\w{5}.js":{
 			"type":"script",
 			"weight":0.9
 		},
-		"route-home.chunk.\\w{5}.css":{
+		"routes-home.chunk.\\w{5}.css":{
 			"type":"style",
 			"weight":0.9
 		}
@@ -238,11 +238,11 @@ exports.pushManifest = `
 			"type":"script",
 			"weight":1
 		},
-		"route-profile.chunk.\\w{5}.js":{
+		"routes-profile.chunk.\\w{5}.js":{
 			"type":"script",
 			"weight":0.9
 		},
-		"route-profile.chunk.\\w{5}.css":{
+		"routes-profile.chunk.\\w{5}.css":{
 			"type":"style",
 			"weight":0.9
 		}