feat：骨架屏

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"

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>

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',

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() {

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>

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