Merge pull request #1008 from redfin/bugfix/larger-than-expected-bundle-files

larger than expected bundle files

Author: drewpc

package-lock.json

@@ -213,11 +213,15 @@ module.exports = {
 					return {
 						done: function(cb) {`);
 			if (isClient) {
-				// No need for require.ensure() here because we are already splitting code based on the routes by having
-				// multiple entry points.  Using require.ensure() or import() will create unnecessary bundles as well
-				// as confuse the browser because it will load some JS/CSS files via FLAB and some via Webpack's
-				// dynamic loader.  Best to just stick with the basic implementation.
-				routesOutput.push(`cb(unwrapEs6Module(require(${relativePathToPage})));`);
+				// Turns out, for now, we do need to keep require.ensure() here.  This should be migrated to
+				// use import() in the future, but there's an issue with Babel not recognizing import() without
+				// another plugin: https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/#installation
+				// The JS/CSS files loaded by FLAB are the entrypoint/initial files.  Webpack's dynamic loader
+				// handles loading the other chunks.
+				routesOutput.push(`
+							require.ensure(${relativePathToPage}, function() {
+								cb(unwrapEs6Module(require(${relativePathToPage})));
+							});`);
 			} else {
 				routesOutput.push(`
 							try {

packages/react-server-cli/src/compileClient.js

@@ -10,7 +10,9 @@ describe("A CSS page", () => {
 
 	describe("can apply a css class", () => {
 		helper.testWithDocument("/css", (document) => {
-			expect(document.querySelector("head link[rel=stylesheet]").href).toMatch(/route0\.css/);
+			// The way Webpack is chunking the CSS files, the client transition might look for 0.css while
+			// the server side looks for route0.css
+			expect(document.querySelector("head link[rel=stylesheet]").href).toMatch(/(?:route)?0\.css/);
 		});
 	});
 
@@ -26,9 +28,11 @@ describe("A CSS page with assets", () => {
 
 	describe("can apply a css class", () => {
 		helper.testWithDocument("/cssWithAssets", (document) => {
-      // this test is really just to make sure that react-server-cli doesn't explode
-      // when compiling CSS that includes images and fonts.
-			expect(document.querySelector("head link[rel=stylesheet]").href).toMatch(/route0\.css/);
+			// this test is really just to make sure that react-server-cli doesn't explode
+			// when compiling CSS that includes images and fonts.
+			// The way Webpack is chunking the CSS files, the client transition might look for 0.css while
+			// the server side looks for route0.css
+			expect(document.querySelector("head link[rel=stylesheet]").href).toMatch(/(?:route)?0\.css/);
 		});
 	});