diff --git a/changes/jordan_simple-perf b/changes/jordan_simple-perf new file mode 100644 index 0000000000..e7b13d7c76 --- /dev/null +++ b/changes/jordan_simple-perf @@ -0,0 +1 @@ +[Changed] implement lazy loading, code splitting, and chunking for improved performance @jbibla \ No newline at end of file diff --git a/src/routes.js b/src/routes.js index abcc31c617..adf1c12e74 100644 --- a/src/routes.js +++ b/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,7 +84,7 @@ export default [ { path: `/networks`, name: `networks`, - component: require(`./components/network/PageNetworks`).default, + component: () => import(`./components/network/PageNetworks`), meta: { requiresAuth: false } @@ -92,7 +92,7 @@ export default [ { 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`) } ] diff --git a/tests/e2e/globals.js b/tests/e2e/globals.js index e1cedfcda3..16c0aaaf0f 100644 --- a/tests/e2e/globals.js +++ b/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,8 +48,11 @@ 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. * @@ -57,7 +60,7 @@ module.exports = { * * @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 diff --git a/vue.config.js b/vue.config.js index 8714f29fec..ea0447dded 100644 --- a/vue.config.js +++ b/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) {