Jordan/simpler code splitting and lazy loading

changes/jordan_simple-perf

@@ -0,0 +1 @@
+[Changed] implement lazy loading, code splitting, and chunking for improved performance @jbibla

src/routes.js

@@ -17,7 +17,7 @@ export default [
     meta: {
       feature: "Proposals"
     },
-    component: require(`./components/governance/PageProposals`).default
+    component: () => import(`./components/governance/PageProposals`)
   },
   // for depredecated routes
   {
@@ -30,7 +30,7 @@ export default [
     meta: {
       feature: "Proposals"
     },
-    component: require(`./components/governance/PageProposal`).default,
+    component: () => import(`./components/governance/PageProposal`),
     props: true
   },
   // for depredecated routes
@@ -44,7 +44,7 @@ export default [
     meta: {
       feature: "Validators"
     },
-    component: require(`./components/staking/PageValidators`).default
+    component: () => import(`./components/staking/PageValidators`)
   },
   // for depredecated routes
   {
@@ -57,7 +57,7 @@ export default [
     meta: {
       feature: "Validators"
     },
-    component: require(`./components/staking/PageValidator`).default
+    component: () => import(`./components/staking/PageValidator`)
   },
   {
     path: `/staking/validators/:validator`,
@@ -66,7 +66,7 @@ export default [
   {
     path: `/portfolio`,
     name: `portfolio`,
-    component: require(`./components/wallet/PagePortfolio`).default,
+    component: () => import(`./components/wallet/PagePortfolio`),
     meta: {
       requiresAuth: true,
       feature: "Portfolio"
@@ -75,7 +75,7 @@ export default [
   {
     path: `/transactions`,
     name: `transactions`,
-    component: require(`./components/wallet/PageTransactions`).default,
+    component: () => import(`./components/wallet/PageTransactions`),
     meta: {
       requiresAuth: true,
       feature: "Activity"
@@ -84,15 +84,15 @@ export default [
   {
     path: `/networks`,
     name: `networks`,
-    component: require(`./components/network/PageNetworks`).default,
+    component: () => import(`./components/network/PageNetworks`),
     meta: {
       requiresAuth: false
     }
   },
   {
     path: `/blocks/:height`,
     name: `block`,
-    component: require(`./components/network/PageBlock`).default,
+    component: () => import(`./components/network/PageBlock`),
     meta: {
       feature: "Explorer"
     }
@@ -101,7 +101,7 @@ export default [
     path: `/welcome`,
     name: `welcome`,
     components: {
-      session: require(`./components/common/TmSessionWelcome`).default
+      session: () => import(`./components/common/TmSessionWelcome`)
     },
     meta: {
       feature: "Session"
@@ -111,7 +111,7 @@ export default [
     path: `/login`,
     name: `login`,
     components: {
-      session: require(`./components/common/TmSessionSignIn`).default
+      session: () => import(`./components/common/TmSessionSignIn`)
     },
     meta: {
       feature: "Session"
@@ -121,7 +121,7 @@ export default [
     path: `/create`,
     name: `create`,
     components: {
-      session: require(`./components/common/TmSessionSignUp`).default
+      session: () => import(`./components/common/TmSessionSignUp`)
     },
     meta: {
       feature: "Session"
@@ -131,7 +131,7 @@ export default [
     path: `/create/password`,
     name: `create-password`,
     components: {
-      session: require(`./components/common/TmSessionSignUpPassword`).default
+      session: () => import(`./components/common/TmSessionSignUpPassword`)
     },
     meta: {
       feature: "Session"
@@ -148,7 +148,7 @@ export default [
     path: `/create/confirm`,
     name: `create-confirm`,
     components: {
-      session: require(`./components/common/TmSessionSignUpSeed`).default
+      session: () => import(`./components/common/TmSessionSignUpSeed`)
     },
     meta: {
       feature: "Session"
@@ -165,7 +165,7 @@ export default [
     path: `/recover`,
     name: `recover`,
     components: {
-      session: require(`./components/common/TmSessionImport`).default
+      session: () => import(`./components/common/TmSessionImport`)
     },
     meta: {
       feature: "Session"
@@ -175,7 +175,7 @@ export default [
     path: `/recover/name`,
     name: `recover-name`,
     components: {
-      session: require(`./components/common/TmSessionImportName`).default
+      session: () => import(`./components/common/TmSessionImportName`)
     },
     meta: {
       feature: "Session"
@@ -192,7 +192,7 @@ export default [
     path: `/recover/password`,
     name: `recover-password`,
     components: {
-      session: require(`./components/common/TmSessionImportPassword`).default
+      session: () => import(`./components/common/TmSessionImportPassword`)
     },
     meta: {
       feature: "Session"
@@ -209,7 +209,7 @@ export default [
     path: `/explore`,
     name: `explore`,
     components: {
-      session: require(`./components/common/TmSessionExplore`).default
+      session: () => import(`./components/common/TmSessionExplore`)
     },
     meta: {
       feature: "Session"
@@ -219,7 +219,7 @@ export default [
     path: `/ledger`,
     name: `ledger`,
     components: {
-      session: require(`./components/common/TmSessionHardware`).default
+      session: () => import(`./components/common/TmSessionHardware`)
     },
     meta: {
       feature: "Session"
@@ -229,7 +229,7 @@ export default [
     path: `/extension`,
     name: `extension`,
     components: {
-      session: require(`./components/common/TmSessionExtension`).default
+      session: () => import(`./components/common/TmSessionExtension`)
     },
     meta: {
       feature: "Session"
@@ -239,37 +239,37 @@ export default [
     path: `/existing`,
     name: `existing`,
     components: {
-      session: require(`./components/common/TmSessionExisting`).default
+      session: () => import(`./components/common/TmSessionExisting`)
     },
     meta: {
       feature: "Session"
     }
   },
-  { path: `/404`, component: require(`./components/common/Page404`).default },
+  { path: `/404`, component: () => import(`./components/common/Page404`) },
   {
     path: `/privacy`,
-    component: require(`./components/common/PagePrivacy`).default
+    component: () => import(`./components/common/PagePrivacy`)
   },
   {
     path: `/terms`,
-    component: require(`./components/common/PageTerms`).default
+    component: () => import(`./components/common/PageTerms`)
   },
   {
     path: `/security`,
-    component: require(`./components/common/PageSecurity`).default
+    component: () => import(`./components/common/PageSecurity`)
   },
   {
     path: `/about`,
-    component: require(`./components/common/PageAbout`).default
+    component: () => import(`./components/common/PageAbout`)
   },
   {
     path: `/careers`,
-    component: require(`./components/common/PageCareers`).default
+    component: () => import(`./components/common/PageCareers`)
   },
   {
     path: `/feature-not-available/:feature`,
-    component: require(`./components/common/PageFeatureNotAvailable`).default,
+    component: () => import(`./components/common/PageFeatureNotAvailable`),
     props: true
   },
-  { path: `*`, component: require(`./components/common/Page404`).default }
+  { path: `*`, component: () => import(`./components/common/Page404`) }
 ]

tests/e2e/globals.js

@@ -15,7 +15,7 @@ module.exports = {
   },
 
   beforeEach(browser, done) {
-    browser.url(browser.launch_url).execute(function() {
+    browser.url(browser.launch_url).execute(function () {
       window.localStorage.setItem(
         `cosmos-wallets-cosmos1ek9cd8ewgxg9w5xllq9um0uf4aaxaruvcw4v9e`,
         JSON.stringify({
@@ -48,16 +48,19 @@ module.exports = {
 
     browser.resizeWindow(1350, 1080)
     browser.refresh()
+    // wait until on portfolio page to make sure future tests have the same state
+    browser.expect.element(".balance-header").to.be.visible.before(10000)
     done()
   },
+
   /**
    * After all the tests are run, evaluate if there were errors and exit appropriately.
    *
    * If there were failures or errors, exit 1, else exit 0.
    *
    * @param results
    */
-  reporter: function(results) {
+  reporter: function (results) {
     if (
       (typeof results.failed === `undefined` || results.failed === 0) &&
       (typeof results.error === `undefined` || results.error === 0)
@@ -70,6 +73,7 @@ module.exports = {
 }
 
 async function apiUp() {
+  console.log("Testing if API is up")
   const start = new Date().getTime()
   // we need to wait until the testnet is up and the account has money
   let apiUp = false
@@ -85,7 +89,7 @@ async function apiUp() {
       if (response.data.errors) {
         throw new Error(JSON.stringify(response.data.errors))
       }
-      if (response.data.data.overview.totalStake !== "1000") {
+      if (Number(response.data.data.overview.totalStake) === 0) {
         continue
       }
       apiUp = true
@@ -98,6 +102,7 @@ async function apiUp() {
 }
 
 async function schemaAvailable() {
+  console.log("Testing if DB is up")
   const start = new Date().getTime()
   // we need to wait until the database is up and has the expected shema
   let databaseUp = false

vue.config.js

@@ -13,6 +13,9 @@ const commitHash = require(`child_process`)
 
 module.exports = {
   publicPath: `/`,
+  chainWebpack: (config) => {
+    config.plugins.delete(`prefetch`)
+  },
   configureWebpack: () => {
     const config = {
       resolve: {
@@ -45,7 +48,12 @@ module.exports = {
             MOBILE_APP: JSON.stringify(process.env.MOBILE_APP)
           }
         })
-      ]
+      ],
+      optimization: {
+        splitChunks: {
+          chunks: 'all',
+        }
+      }
     }
 
     if (process.env.NODE_ENV === `production` && !process.env.E2E_TESTS) {