Merge branch 'next' into return-for-factories

vuestorefront · Dec 28, 2020 · a898085 · a898085
2 parents df40dcf + 3eaf767
commit a898085
Show file tree

Hide file tree

Showing 11 changed files with 449 additions and 356 deletions.
diff --git a/packages/boilerplate/composables/package.json b/packages/boilerplate/composables/package.json
@@ -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": [

diff --git a/packages/boilerplate/theme/nuxt.config.js b/packages/boilerplate/theme/nuxt.config.js
@@ -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',
+        href: 'https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600,700|Roboto:300,300i,400,400i,500,700&display=swap',
+        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\''
       }
     ]
   },

diff --git a/packages/boilerplate/theme/package.json b/packages/boilerplate/theme/package.json
@@ -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",

diff --git a/packages/commercetools/theme/nuxt.config.js b/packages/commercetools/theme/nuxt.config.js
@@ -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',
+        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: []

diff --git a/packages/core/docs/contributing/changelog.md b/packages/core/docs/contributing/changelog.md
@@ -8,6 +8,7 @@
 - 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))
 - change `useUserBillingFactory`, `useUserShippingFactory` and `useWishlistFactory` to return composable, move `setWishlist` inside of composable ([5350](https://github.com/vuestorefront/vue-storefront/pull/5350))
+- 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

diff --git a/packages/core/nuxt-theme-module/package.json b/packages/core/nuxt-theme-module/package.json
@@ -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"

diff --git a/packages/core/nuxt-theme-module/theme/layouts/default.vue b/packages/core/nuxt-theme-module/theme/layouts/default.vue
@@ -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 />
@@ -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,