商品列表和详情页优化

@@ -98,12 +98,14 @@ try {
     const setYohoData = require('./doraemon/middleware/set-yoho-data');
     const setYohoData = require('./doraemon/middleware/set-yoho-data');
     const errorHanlder = require('./doraemon/middleware/error-handler');
     const errorHanlder = require('./doraemon/middleware/error-handler');
     const setPageInfo = require('./doraemon/middleware/set-pageinfo');
     const setPageInfo = require('./doraemon/middleware/set-pageinfo');
+    const layoutTools = require('./doraemon/middleware/layout-tools');
 
 
 
 
     // YOHO 前置中间件
     // YOHO 前置中间件
     app.use(setYohoData());
     app.use(setYohoData());
     app.use(user());
     app.use(user());
     app.use(setPageInfo());
     app.use(setPageInfo());
+    app.use(layoutTools());
 
 
     require('./dispatch')(app);
     require('./dispatch')(app);
 
 

@@ -18,9 +18,9 @@ module.exports = {
         app_type: 1
         app_type: 1
     },
     },
     domains: {
     domains: {
-        api: 'http://api-test3.yohops.com:9999/',
-        service: 'http://service-test3.yohops.com:9999/',
-        singleApi: 'http://api-test3.yohops.com:9999/'
+        // api: 'http://api-test3.yohops.com:9999/',
+        // service: 'http://service-test3.yohops.com:9999/',
+        // singleApi: 'http://api-test3.yohops.com:9999/'
 
 
         // api: 'http://api-test2.yohops.com:9999/',
         // api: 'http://api-test2.yohops.com:9999/',
         // service: 'http://service-test2.yohops.com:9999/',
         // service: 'http://service-test2.yohops.com:9999/',
@@ -29,9 +29,9 @@ module.exports = {
         // service: 'http://dev-service.yohops.com:9999/',
         // service: 'http://dev-service.yohops.com:9999/',
         // singleApi: 'http://192.168.102.27:8092/'
         // singleApi: 'http://192.168.102.27:8092/'
         // //
         // //
-        // api: 'http://api.yoho.cn/',
-        // service: 'http://service.yoho.cn/',
-        // singleApi: 'http://single.yoho.cn/'
+        api: 'http://api.yoho.cn/',
+        service: 'http://service.yoho.cn/',
+        singleApi: 'http://single.yoho.cn/'
     },
     },
     subDomains: {
     subDomains: {
         host: '.m.yohoblk.com',
         host: '.m.yohoblk.com',

+// 在这个文件中配置 DNS 预读域名
+
+module.exports = {
+    hosts: [
+        '//cdn.yoho.cn',
+        '//static.yohobuy.com',
+        '//img10.static.yhbimg.com',
+        '//img11.static.yhbimg.com',
+        '//img12.static.yhbimg.com',
+        '//img13.static.yhbimg.com',
+    ]
+};
+

+'use strict';
+
+const dnsPrefetch = require('../../config/dns-prefetch');
+
+module.exports = () => {
+    return (req, res, next) => {
+        Object.assign(res.locals, {
+            dnsPrefetch: dnsPrefetch
+        });
+
+        next();
+    };
+};

@@ -9,10 +9,14 @@
         <meta name="apple-mobile-web-app-status-bar-style" content="black">
         <meta name="apple-mobile-web-app-status-bar-style" content="black">
         <meta content="telephone=no" name="format-detection">
         <meta content="telephone=no" name="format-detection">
         <meta content="email=no" name="format-detection">
         <meta content="email=no" name="format-detection">
-        <link rel="dns-prefetch" href="//cdn.yoho.cn">
-        <link rel="dns-prefetch" href="//static.yohobuy.com">
+        {{#dnsPrefetch.hosts}}
+            <link rel="dns-prefetch" href="{{this}}">
+        {{/dnsPrefetch.hosts}}
         <script type="text/javascript">
         <script type="text/javascript">
             (function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=750){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/750)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window);
             (function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=750){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/750)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window);
+            if (/YohoBuy/i.test(navigator.userAgent || '')) {
+                window.appBaseLogs = {device: {},status: [],events: []}
+            }
         </script>
         </script>
         {{#if devEnv}}
         {{#if devEnv}}
             <link rel="stylesheet" media="all" href="//{{devHost}}:5004/index.css">
             <link rel="stylesheet" media="all" href="//{{devHost}}:5004/index.css">

@@ -37,6 +37,10 @@ const getImgUrl = function(src, width = 300, height = 300, mode = 2) {
     }).replace(/https?:/, '') + '/interlace/1' : '';
     }).replace(/https?:/, '') + '/interlace/1' : '';
 };
 };
 
 
+const replaceHttp = function(src) {
+    return src.replace(/https?:/, '');
+};
+
 // 退换货 申请 成功， 打开 modal
 // 退换货 申请 成功， 打开 modal
 const applySuccuss = function(type, applyId) {
 const applySuccuss = function(type, applyId) {
     yoho.store.set('orderDetail', true);
     yoho.store.set('orderDetail', true);
@@ -115,5 +119,6 @@ export default {
     getImgUrl,
     getImgUrl,
     applySuccuss,
     applySuccuss,
     visibilitychange,
     visibilitychange,
-    getChannel
+    getChannel,
+    replaceHttp
 };
 };

@@ -116,15 +116,45 @@ function BlkHrefBinding(el, binding) {
     el.href = `${protocol}${value}`;
     el.href = `${protocol}${value}`;
 }
 }
 
 
+function lazyHtmlReplace(html, lazy) {
+    let renderImgIndex = 5;
+
+    return html
+        .replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (imgHtml, src) => {
+            if (src.indexOf('?') < 0) {
+                src += '?imageMogr2/thumbnail/750x/quality/60/interlace/1/format/webp';
+            }
+            if (lazy) {
+                renderImgIndex--;
+            }
+            src = util.replaceHttp(src);
+            return (lazy && renderImgIndex < 0) ? `<img v-lazy.imgLazyContainer="'${src}'" />` : `<img src="${src}" />`;
+        });
+}
+
 export default (Vue) => {
 export default (Vue) => {
     Vue.directive('lazy-html', {
     Vue.directive('lazy-html', {
         bind(el, binding) {
         bind(el, binding) {
             // TODO 首屏幕不使用
             // TODO 首屏幕不使用
-            let html = binding.value
-                .replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, '<img src="$1">')
-                .replace(/https?:/gi, '');
-
-            el.innerHTML = html;
+            setTimeout(() => {
+                let html = lazyHtmlReplace(binding.value, true);
+
+                try {
+                    let res = Vue.compile(`<div>${html}</div>`);
+                    let component = new Vue({
+                        render: res.render,
+                        staticRenderFns: res.staticRenderFns
+                    });
+
+                    Vue.nextTick(() => {
+                        component.$mount(el);
+                    });
+
+                } catch (e) {
+                    html = lazyHtmlReplace(binding.value);
+                    el.innerHTML = html;
+                }
+            }, 500);
         }
         }
     });
     });
     Vue.directive('img-src', {
     Vue.directive('img-src', {

 import Vue from 'vue';
 import Vue from 'vue';
+import lazyload from 'vue-lazyload';
 import prefers from 'me/prefers.vue';
 import prefers from 'me/prefers.vue';
 import yoho from 'yoho';
 import yoho from 'yoho';
 
 
 
 
+Vue.use(lazyload, {
+    preLoad: 3
+});
+
 yoho.ready(() => {
 yoho.ready(() => {
     new Vue({
     new Vue({
         el: '#prefer',
         el: '#prefer',

@@ -4,7 +4,7 @@ import app from 'product/detail/index.vue';
 import yoho from 'yoho';
 import yoho from 'yoho';
 
 
 Vue.use(lazyload, {
 Vue.use(lazyload, {
-    preLoad: 3
+    preLoad: 2
 });
 });
 
 
 yoho.ready(() => {
 yoho.ready(() => {

@@ -5,7 +5,7 @@
             <div class="product-item" v-for="item in list" :key="item.url">
             <div class="product-item" v-for="item in list" :key="item.url">
                 <a :href="item.url">
                 <a :href="item.url">
                     <a v-good-href="item">
                     <a v-good-href="item">
-                        <img v-img-src="{src: item.default_images, width: 250, height: 335}">
+                        <img-lazy :src="{src: item.default_images, width: 250, height: 335}" :lazy="lazy"></img-lazy>
                         <p class="product-name">{{item.product_name}}</p>
                         <p class="product-name">{{item.product_name}}</p>
                     </a>
                     </a>
                 </a>
                 </a>
@@ -18,9 +18,19 @@
     </div>
     </div>
 </template>
 </template>
 <script>
 <script>
-    export default {
-        props: ['list', 'title']
-    };
+import ImgLazy from 'component/tool/img-lazy.vue';
+
+export default {
+    props: {
+        list: {},
+        title: {},
+        lazy: {
+            type: Boolean,
+            default: false
+        }
+    },
+    components: {ImgLazy}
+};
 </script>
 </script>
 <style>
 <style>
     .title-wrap {
     .title-wrap {

+<template>
+    <img v-if="lazy" v-lazy="currentSrc" alt="">
+    <img v-else :src="currentSrc" alt="">
+</template>
+
+<script>
+import util from 'common/util';
+
+export default {
+    name: 'img-lazy',
+    props: {
+        src: {
+            type: [Object, String]
+        },
+        lazy: {
+            type: Boolean,
+            default: true
+        }
+    },
+    computed: {
+        currentSrc() {
+            if (typeof this.src === 'string') {
+                return util.replaceHttp(this.src);
+            } else if (typeof this.src === 'object') {
+                let {src, width, height, mode} = this.src;
+
+                return util.getImgUrl(src, width, height, mode);
+            }
+        }
+    }
+};
+</script>

 <template>
 <template>
     <div>
     <div>
         <div>
         <div>
-            <div v-if="block.text" class="text-block a" v-lazy-html="block.text.data.text">
+            <div class="text-block a">
+                <div v-if="block.text"  v-lazy-html="block.text.data.text"></div>
             </div>
             </div>
-
             <div v-if="block.singleImage">
             <div v-if="block.singleImage">
                 <div v-for="(item, index) in block.singleImage.data" :key="index">
                 <div v-for="(item, index) in block.singleImage.data" :key="index">
                     <img :title="item.title"
                     <img :title="item.title"

 <template>
 <template>
-    <prefer-list :title="title" :list="list"></prefer-list>
+    <prefer-list :title="title" :list="list" :lazy="true"></prefer-list>
 </template>
 </template>
 
 
 <script>
 <script>

@@ -246,7 +246,7 @@
     </show-box>
     </show-box>
 
 
     <show-box class="prefer-detail" :is-last="preferList.length > 0" v-if="preferList.length > 0">
     <show-box class="prefer-detail" :is-last="preferList.length > 0" v-if="preferList.length > 0">
-        <prefer-list :title="preferTitle" :list="preferList"></prefer-list>
+        <prefer-list :title="preferTitle" :list="preferList" :lazy="true"></prefer-list>
     </show-box>
     </show-box>
 
 
     <div v-if="isApp && isReady">
     <div v-if="isApp && isReady">
@@ -372,7 +372,9 @@
 
 
             getMightLike(skn, shopId) {
             getMightLike(skn, shopId) {
                 $.get('/product/mightLike', {skn, shopId}).then(res => {
                 $.get('/product/mightLike', {skn, shopId}).then(res => {
-                    this.preferList = res.data || [];
+                    setTimeout(() => {
+                        this.preferList = res.data || [];
+                    }, 500);
                 });
                 });
             },
             },