项目中所做的优化

1. vue实现较多，放弃使用zepto。 

2. swiper.js在进入详情页的时候再开始加载。 

3. flexible.js、reset.css 是否要内联，因为用户可能会经常登录，如果使用内联的方式那么就不会被缓存了， 所以如果放在文件中引入，可以缓存。

4. 对于接受的数据，汉字不是UTF-8，所以这边显示是乱码，浏览器就需要话费时间去解析这个乱码，所以经过后端的调试，请求得到的就是正确的汉字，这样前端浏览器就不会解析乱码了。

 

 

 

 

 

 

优化加载方式

 

　　使用activated、keep-alive、 beforeRouterEnter实现页面加载的完美化！

    beforeRouteEnter (to, from, next) { 
      next();
      if (from.path == '/microComBuilding') {
        sessionStorage.setItem('create', 'true');
      } else {
        sessionStorage.setItem('create', 'false');
      }

      if (from.path == '/') {
        sessionStorage.setItem('reload', 'true');
      } else {
        sessionStorage.setItem('reload', 'false');
      }
    },

 

 

    activated () {
      if (sessionStorage.getItem('create') == 'true') {
        if (sessionStorage.getItem('reload') == 'false') {
          this.getClassify(); 
          this.RESET_VALUE();
        }
      } else {
        // 什么都不做
      }
    },

　　思路很简单，就是将commodity页面设置为静态的。 但是从微商厦进入时数据就得不到刷新了。 如果希望刷新，就必须要设置为动态的，但是动态的页面在切换的时候所带来的消耗有时巨大的。所以，我们可以通过路由来判断。但是上面的代码还是有问题。

 

　　但是在activated 中的问题就是如果是第一次进来呢，那么created和activated 就会同时发送两个数据， 这样的情况是我们不想看到的，所以我们可以根据store中的state再添加一次判断，就是如果第一次进来，那么activated 钩子函数和created的钩子函数相差的间隔只有20ms，所以这个获取店铺信息的数据是不可能请求的回来的，从network中可以看到这个请求的时间约是间隔时间的10倍以上，我们可以认为远远大于，所以下面的代码是没有问题的。

    activated () {
      console.log('activeated' ,new Date().getTime());
      // 从微商厦页面进入时一定是要从新加载数据的。
      if (sessionStorage.getItem('create') == 'true') {
        // 如果此时用户刷新了页面，那么create的时候获取数据就可以了，所以不刷新的时候从微商厦进入再获取数据
        if (this.$store.state.items.length !== 0) {
          if (sessionStorage.getItem('reload') == 'false') {
          // 但是还是有一个问题，就是第一次进入的时候， 并没有刷新，那么还需要一个flag
          // 在created之后就会触发activated 钩子函数，这段时间发送的请求是不可能回来的，间隔只有20ms。
            this.getClassify(); 
            this.RESET_VALUE();
          } 
        }
      } else {
        // 什么都不做
      }
    },