From 3b2577d3a296e5cdf20b7383e0b656e63472979e Mon Sep 17 00:00:00 2001
From: ewall <1054064180@qq.com>
Date: Tue, 24 Mar 2020 13:41:31 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                        |  1 +
 src/components/Tabbar/index.vue     |  4 +--
 src/router/index.js                 |  4 ++-
 src/views/home/index.vue            | 40 ++++++++++++++--------
 src/views/home/modules/Skeleton.vue | 51 +++++++++++++++++++++++++++++
 vue.config.js                       |  6 ++--
 6 files changed, 88 insertions(+), 18 deletions(-)
 create mode 100644 src/views/home/modules/Skeleton.vue

diff --git a/package.json b/package.json
index 62c7d88..8b8c708 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "normalize.css": "^8.0.1",
     "vant": "^2.5.5",
     "vue": "^2.6.11",
+    "vue-content-loader": "^0.2.3",
     "vue-router": "^3.1.5",
     "vue-scrollto": "^2.17.1",
     "vuex": "^3.1.2"
diff --git a/src/components/Tabbar/index.vue b/src/components/Tabbar/index.vue
index 6c74c0a..2550d6b 100644
--- a/src/components/Tabbar/index.vue
+++ b/src/components/Tabbar/index.vue
@@ -38,7 +38,7 @@ export default {
   border-top: 2px solid #f5f5f5;
 }
 .tabbar--placeholder {
-    width: 100vw;
-    height: 100px;
+  width: 100vw;
+  height: 100px;
 }
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 86dab02..07805a5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,9 @@ const routes = [
   {
     path: '*',
     name: 'Home',
-    component: () => import('@/views/home')
+    // 路由懒加载：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
+    // preload：https://www.jianshu.com/p/bbdcfeee7fbc
+    component: () => import(/* webpackPreload: true */ '@/views/home')
   },
   {
     path: '/login',
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 7d785ef..4aac695 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -11,6 +11,7 @@
       @onReachBottom="onReachBottom"
     />
     <back-top />
+    <Skeleton v-if="isSkeletonShow"/>
   </div>
 </template>
 
@@ -21,6 +22,7 @@ import Swiper from './modules/Swiper'
 import Category from './modules/Category'
 import Session from './modules/Session'
 import Goods from './modules/Goods'
+import Skeleton from './modules/Skeleton'
 import BackTop from '@/components/BackTop'
 
 export default {
@@ -31,7 +33,8 @@ export default {
     Swiper,
     Category,
     Session,
-    Goods
+    Goods,
+    Skeleton
   },
   data() {
     return {
@@ -42,30 +45,41 @@ export default {
       pageSize: 1,
       pageNum: 4,
       isLoading: false,
-      isFinished: false
+      isFinished: false,
+      isSkeletonShow: true
     }
   },
   mounted() {
-    this.getBanner()
-    this.getCategory()
-    this.getSession()
-    this.getGoodsList()
+    Promise.all([this.getBanner(), this.getCategory(), this.getSession()])
+      .then(() => {
+        this.isSkeletonShow = false
+        this.getGoodsList()
+      })
   },
   methods: {
     getBanner() {
-      getBanner().then(res => {
-        this.banner = res.entry
+      return new Promise(resolve => {
+        getBanner().then(res => {
+          this.banner = res.entry
+          resolve()
+        })
       })
     },
     getCategory() {
-      getCategory().then(res => {
-        const data = res.entry
-        this.cateList = data
+      return new Promise(resolve => {
+        getCategory().then(res => {
+          const data = res.entry
+          this.cateList = data
+          resolve()
+        })
       })
     },
     getSession() {
-      getSession().then(res => {
-        this.sessionList = res.entry
+      return new Promise(resolve => {
+        getSession().then(res => {
+          this.sessionList = res.entry
+          resolve()
+        })
       })
     },
     getGoodsList() {
diff --git a/src/views/home/modules/Skeleton.vue b/src/views/home/modules/Skeleton.vue
new file mode 100644
index 0000000..b9abe90
--- /dev/null
+++ b/src/views/home/modules/Skeleton.vue
@@ -0,0 +1,51 @@
+
+<template>
+  <div class="skeleton">
+    <ContentLoader width="325" height="600">
+      <rect x="10" y="8" rx="3" ry="3" width="305" height="30" />
+
+      <rect x="10" y="45" rx="3" ry="3" width="305" height="130" />
+
+      <circle cx="35" cy="210" r="25" />
+      <circle cx="35" cy="280" r="25" />
+      <circle cx="100" cy="210" r="25" />
+      <circle cx="100" cy="280" r="25" />
+      <circle cx="165" cy="210" r="25" />
+      <circle cx="165" cy="280" r="25" />
+      <circle cx="230" cy="210" r="25" />
+      <circle cx="295" cy="210" r="25" />
+      <circle cx="230" cy="280" r="25" />
+      <circle cx="295" cy="280" r="25" />
+
+      <rect x="100" y="340" rx="3" ry="3" width="120" height="20" />
+
+      <rect x="10" y="370" rx="3" ry="3" width="305" height="130" />
+
+      <rect x="10" y="510" rx="3" ry="3" width="305" height="10" />
+      <rect x="10" y="540" rx="3" ry="3" width="305" height="10" />
+      <rect x="10" y="570" rx="3" ry="3" width="305" height="10" />
+    </ContentLoader>
+  </div>
+</template>
+
+<script>
+//
+import { ContentLoader } from 'vue-content-loader'
+
+export default {
+  components: { ContentLoader }
+}
+</script>
+
+<style lang="scss" scoped>
+.skeleton {
+  background: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 100px;
+  z-index: 999;
+  overflow: hidden;
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index 03ba807..96ec570 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -41,8 +41,10 @@ module.exports = {
     }
   },
   chainWebpack (config) {
-    config.plugins.delete('preload') // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
+    // 禁用prefetch和preload，在router.jszhong1通过webpack的内联注释手动选定要提前获取的代码区块
+    // https://cli.vuejs.org/zh/guide/html-and-static-assets.html#preload
+    config.plugins.delete('preload')
+    config.plugins.delete('prefetch')
 
     // set svg-sprite-loader
     config.module