Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add lazy loading and hydration #5326

Merged
merged 11 commits into from
Dec 23, 2020
Merged

Add lazy loading and hydration #5326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
cb6ff53
Reduce Total Blocking Time
filipsobol Dec 11, 2020
d5c0b63
Improve lazy loading and hydration
filipsobol Dec 15, 2020
98d3f88
Merge remote-tracking branch 'origin/next' into 20201211-reduce-total…
filipsobol Dec 15, 2020
cc1f41a
Update based on feedback
filipsobol Dec 22, 2020
057f7e2
Update Google font loading in CT
filipsobol Dec 22, 2020
9e7f377
Dont lazy load sidebars
filipsobol Dec 22, 2020
8d7db3b
Revert import order change
filipsobol Dec 22, 2020
1ba2b22
Merge remote-tracking branch 'origin/next' into 20201211-reduce-total…
filipsobol Dec 22, 2020
e9c5615
Import LazyHydrate in Home page
filipsobol Dec 22, 2020
bb74af2
Merge remote-tracking branch 'origin/next' into 20201211-reduce-total…
filipsobol Dec 22, 2020
5d2f68b
Update changelog
filipsobol Dec 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/boilerplate/composables/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"prepublish": "yarn build"
},
"dependencies": {
"@vue-storefront/boilerplate-api": "^0.0.1",
"@vue-storefront/boilerplate-api": "0.0.1",
"@vue-storefront/core": "^2.1.1-rc.1"
},
"files": [
Expand Down
27 changes: 17 additions & 10 deletions packages/boilerplate/theme/nuxt.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,29 @@ export default {
title: 'Vue Storefront',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport',
content: 'width=device-width, initial-scale=1' },
{ hid: 'description',
name: 'description',
content: process.env.npm_package_description || '' }
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
}, {
},
{
rel: 'preconnect',
href: 'https://fonts.googleapis.com'
}, {
rel: 'preconnect',
href: 'https://fonts.gstatic.com'
href: 'https://fonts.gstatic.com',
crossorigin: 'crossorigin'
},
{
rel: 'preload',
filipsobol marked this conversation as resolved.
Show resolved Hide resolved
href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap',
filipsobol marked this conversation as resolved.
Show resolved Hide resolved
as: 'style'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap',
media: 'print',
onload: 'this.media=\'all\''
}
]
},
Expand Down
7 changes: 3 additions & 4 deletions packages/boilerplate/theme/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,20 @@
},
"dependencies": {
"@storefront-ui/vue": "^0.9.1",
"@vue-storefront/boilerplate-api": "^0.0.1",
"@vue-storefront/boilerplate": "^0.0.1",
"@vue-storefront/boilerplate": "0.0.1",
"@vue-storefront/nuxt": "^2.1.1-rc.1",
"@vue-storefront/nuxt-theme": "^2.1.1-rc.1",
"@nuxtjs/style-resources": "^1.0.0",
"cookie-universal-nuxt": "^2.1.3",
"nuxt-i18n": "^6.5.0",
"core-js": "^2.6.5",
"nuxt": "^2.13.3",
"nuxt-i18n": "^6.5.0",
"vee-validate": "^3.2.3",
"vue-scrollto": "^2.17.1"
},
"devDependencies": {
"@nuxt/typescript-build": "^2.0.0",
"@nuxt/types": "^0.7.9",
"@nuxt/typescript-build": "^2.0.0",
"@vue/test-utils": "^1.0.0-beta.27",
"babel-jest": "^24.1.0",
"jest": "^24.1.0",
Expand Down
27 changes: 17 additions & 10 deletions packages/commercetools/theme/nuxt.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,29 @@ export default {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport',
content: 'width=device-width, initial-scale=1' },
{ hid: 'description',
name: 'description',
content: process.env.npm_package_description || '' }
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
],
link: [
{ rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
}, {
rel: 'preconnect',
href: 'https://fonts.googleapis.com'
}, {
},
{
rel: 'preconnect',
href: 'https://fonts.gstatic.com'
href: 'https://fonts.gstatic.com',
crossorigin: 'crossorigin'
},
{
rel: 'preload',
href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap',
filipsobol marked this conversation as resolved.
Show resolved Hide resolved
as: 'style'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap',
media: 'print',
onload: 'this.media=\'all\''
}
],
script: []
Expand Down
1 change: 1 addition & 0 deletions packages/core/docs/contributing/changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
- [BREAKING] composables are always returning one field for the response, removed `totalOrders` and `totalProducts`, `useCartFactory` and `useUserFactory` are returning only composables ([#5330](https://github.com/vuestorefront/vue-storefront/pull/5330))
- removed `formatPrice` from `useUiHelpers`, replaced by vue18n `$n` function ([#5339](https://github.com/vuestorefront/vue-storefront/pull/5339))
- updated integration boilerplate to work with refactored names of factories mentioned above ([#5348](https://github.com/DivanteLtd/vue-storefront/pull/5348))
- optimize loading of fonts and their stylesheets from Google Fonts and introduce lazy hydration to improve performance ([#5326](https://github.com/DivanteLtd/vue-storefront/pull/5326))

## 2.1.1-rc.1
- updated version of nuxt composition-api
Expand Down
3 changes: 2 additions & 1 deletion packages/core/nuxt-theme-module/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
"ejs": "^3.0.2",
"loglevel": "^1.6.7",
"ts-loader": "^8.0.3",
"vue": "^2.6.11"
"vue": "^2.6.11",
"vue-lazy-hydration": "^2.0.0-beta.4"
},
"publishConfig": {
"access": "public"
Expand Down
27 changes: 20 additions & 7 deletions packages/core/nuxt-theme-module/theme/layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,24 @@
<template>
<div>
<TopBar class="desktop-only" />
<div id="layout" >
<AppHeader />
<LazyHydrate when-visible>
<TopBar class="desktop-only" />
</LazyHydrate>

<div id="layout">
<LazyHydrate when-idle>
<AppHeader />
</LazyHydrate>

<nuxt :key="$route.fullPath"/>
<BottomNavigation />
<AppFooter />

<LazyHydrate when-visible>
<BottomNavigation />
</LazyHydrate>

<LazyHydrate when-visible>
<AppFooter />
</LazyHydrate>

<CartSidebar />
<WishlistSidebar />
<LoginModal />
Expand All @@ -21,11 +34,11 @@ import TopBar from '~/components/TopBar.vue';
import CartSidebar from '~/components/CartSidebar.vue';
import WishlistSidebar from '~/components/WishlistSidebar.vue';
import LoginModal from '~/components/LoginModal.vue';
// const CartSidebar = () => import(/* webpackChunkName: "CartSidebar" */ '~/components/CartSidebar.vue')
// const LoginModal = () => import(/* webpackChunkName: "LoginModal" */ '~/components/LoginModal.vue')
import LazyHydrate from 'vue-lazy-hydration';

export default {
components: {
LazyHydrate,
TopBar,
AppHeader,
BottomNavigation,
Expand Down
Loading