inject chunk names into the html to save xhr rq

grgur · grgur · commit d68cb99f3e56 · 2016-11-29T10:19:13.000+01:00
diff --git a/client/containers/App/index.js b/client/containers/App/index.js
@@ -12,11 +12,9 @@ export default class App extends Component {
   }
 
   componentDidMount() {
-    fetch('/chunks.json')
-      .then(res => res.json())
-      .then(chunks => this.setState({
-        preload: chunks.map(chunk => ({ href: chunk, rel: 'preload', as: 'script' }))
-      }));
+    this.setState({
+      preload: window.__CHUNKS.map(chunk => ({ href: chunk, rel: 'preload', as: 'script' }))
+    });
   }
 
   render() {
diff --git a/client/index.ejs b/client/index.ejs
@@ -7,5 +7,6 @@
   </head>
   <body>
     <div id="root"></div>
+    <script>window.__CHUNKS=[];</script>
   </body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -43,22 +43,21 @@ const plugins = [
   function() {
     const compiler = this;
     const chunkRegEx = /^chunk[.]/;
-    compiler.plugin('emit', function(compilation, callback) {
-      const chunks = compilation
-        .getStats()
-        .toJson()
-        .assets
-        .filter(asset => chunkRegEx.test(asset.name))
-        .map(asset => asset.name);
+    compiler.plugin('compilation', function(compilation) {
+      compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, cb) {
+        // find all chunk file names
+        const extractedChunks = compilation
+          .chunks
+          .reduce((chunks, chunk) => chunks.concat(chunk.files), [])
+          .filter(chunk => chunkRegEx.test(chunk));
 
-      const json = JSON.stringify(chunks);
+        // create a stringified version of the array
+        const json = JSON.stringify(extractedChunks);
 
-      compilation.assets['chunks.json'] = {
-        source: () => json,
-        size: () => json.length
-      };
-
-      callback();
+        // inject chunks into the html
+        htmlPluginData.html = htmlPluginData.html.replace('window.__CHUNKS=[];', `window.__CHUNKS=${json}`);
+        cb(null, htmlPluginData);
+      });
     });
   },
 ];
@@ -165,6 +164,19 @@ module.exports = {
     inject: true,
     port: 3000,
     compress: isProd,
-    stats: { colors: true },
+    stats: {
+      assets: true,
+      children: false,
+      chunks: false,
+      hash: false,
+      modules: false,
+      publicPath: false,
+      timings: true,
+      version: false,
+      warnings: true,
+      colors: {
+        green: '\u001b[32m',
+      }
+    },
   }
 };

Original file line number	Diff line number	Diff line change
`@@ -12,11 +12,9 @@ export default class App extends Component {`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`componentDidMount() {`
`15`		`- fetch('/chunks.json')`
`16`		`- .then(res => res.json())`
`17`		`- .then(chunks => this.setState({`
`18`		`- preload: chunks.map(chunk => ({ href: chunk, rel: 'preload', as: 'script' }))`
`19`		`- }));`
	`15`	`+ this.setState({`
	`16`	`+ preload: window.__CHUNKS.map(chunk => ({ href: chunk, rel: 'preload', as: 'script' }))`
	`17`	`+ });`
`20`	`18`	`}`
`21`	`19`
`22`	`20`	`render() {`