Reduce all About Pages load time using webpack code-splitting

Uses webpacks dynamic import capability, which will split the entry.js file in to multiple chunks, saving the browser having to retrieve and parse the parts of javascript that are not neccessary for the specific about page that is to be loaded.
alexwykoff · Dec 22, 2017 · c9f21b9 · c9f21b9
1 parent 8dc6b12
commit c9f21b9
Show file tree

Hide file tree

Showing 5 changed files with 264 additions and 128 deletions.
diff --git a/.babelrc b/.babelrc
@@ -9,6 +9,7 @@
   ],
   "plugins": [
     "transform-react-inline-elements",
-    "transform-react-constant-elements"
+    "transform-react-constant-elements",
+    "syntax-dynamic-import"
   ]
 }
diff --git a/js/about/entry.js b/js/about/entry.js
@@ -3,7 +3,7 @@ const {getSourceAboutUrl, getBaseUrl} = require('../lib/appUrlUtil')
 const {ABOUT_COMPONENT_INITIALIZED} = require('../constants/messages')
 const ipc = window.chrome.ipcRenderer
 
-let element
+let getElementOp
 
 ipc.on('language', (e, detail) => {
   if (document.l10n) {
@@ -17,64 +17,66 @@ ipc.send('request-language')
 
 switch (getBaseUrl(getSourceAboutUrl(window.location.href))) {
   case 'about:about':
-    element = require('./about')
+    getElementOp = import('./about')
     break
   case 'about:adblock':
-    element = require('./adblock')
+    getElementOp = import('./adblock')
     break
   case 'about:autofill':
-    element = require('./autofill')
+    getElementOp = import('./autofill')
     break
   case 'about:brave':
-    element = require('./brave')
+    getElementOp = import('./brave')
     break
   case 'about:bookmarks':
-    element = require('../../app/renderer/about/bookmarks/bookmarks')
+    getElementOp = import('../../app/renderer/about/bookmarks/bookmarks')
     break
   case 'about:certerror':
-    element = require('./certerror')
+    getElementOp = import('./certerror')
     break
   case 'about:downloads':
-    element = require('./downloads')
+    getElementOp = import('./downloads')
     break
   case 'about:error':
-    element = require('./errorPage')
+    getElementOp = import('./errorPage')
     break
   case 'about:extensions':
-    element = require('./extensions')
+    getElementOp = import('./extensions')
     break
   case 'about:history':
-    element = require('./history')
+    getElementOp = import('./history')
     break
   case 'about:newtab':
-    element = require('./newtab').AboutNewTab
+    getElementOp = import('./newtab').then(module => module.AboutNewTab)
     break
   case 'about:passwords':
-    element = require('./passwords')
+    getElementOp = import('./passwords')
     break
   case 'about:preferences':
-    element = require('./preferences').AboutPreferences
+    getElementOp = import('./preferences').then(module => module.AboutPreferences)
     break
   case 'about:safebrowsing':
-    element = require('./safebrowsing')
+    getElementOp = import('./safebrowsing')
     break
   case 'about:styles':
-    element = require('./styles')
+    getElementOp = import('./styles')
     break
   case 'about:contributions':
-    element = require('./contributionStatement')
+    getElementOp = import('./contributionStatement')
     break
   case 'about:welcome':
-    element = require('../../app/renderer/about/welcome')
+    getElementOp = import('../../app/renderer/about/welcome')
     break
 }
 
-if (element) {
-  const component = ReactDOM.render(element, document.querySelector('#appContainer'))
-  ipc.on('state-updated', (e, detail) => {
-    if (detail) {
-      component.setState(detail)
-    }
+if (getElementOp) {
+  getElementOp.then(element => {
+    const component = ReactDOM.render(element, document.querySelector('#appContainer'))
+    ipc.on('state-updated', (e, detail) => {
+      if (detail) {
+        component.setState(detail)
+      }
+    })
+    ipc.send(ABOUT_COMPONENT_INITIALIZED)
   })
-  ipc.send(ABOUT_COMPONENT_INITIALIZED)
 }