Merge branch 'hotfix/asyncjs' into 'master'

Hotfix/asyncjs



See merge request !12

 <template>
    <div class="wrapper">
-     <template v-if="data.showInviteCode">
+     <template v-if="status === 1">
       <div class="item title mg4">我的邀请码</div>
       <div class="item code mg3">{{data.showInviteCode}}</div>
 
@@ -51,7 +51,8 @@ export default {
       default() {
         return {};
       }
-    }
+    },
+    status: [Number, String]
   },
   mounted() {
     let vm = this;

@@ -2,7 +2,7 @@
   <div>
     <BannerPage></BannerPage>
   <div class="body-wrapper">
-    <InviteCode class="mg" :data="inviteCode"></InviteCode>
+    <InviteCode class="mg" :data="inviteCode" :status="status"></InviteCode>
     <FriendList class="mg" :list="inviteCode.inviteRecordList" v-if="inviteCode.inviteRecordList.length > 0"></FriendList>
     <BankStatus class="mg" :card="getBandLength"></BankStatus>
     <RecordList class="mg" :list="recordList"></RecordList>
@@ -25,7 +25,7 @@ const {mapState, mapGetters} = createNamespacedHelpers('invite/invite');
 export default {
   name: 'detailPage',
   computed: {
-    ...mapState(['recordList', 'inviteCode']),
+    ...mapState(['recordList', 'inviteCode', 'status']),
     ...mapGetters(['getBandLength'])
   },
   data() {

@@ -15,18 +15,17 @@ import {Scroll} from 'cube-ui';
 
 import {createNamespacedHelpers} from 'vuex';
 
-const {mapState} = createNamespacedHelpers('invite/invite');
+const {mapState, mapActions} = createNamespacedHelpers('invite/invite');
 
 export default {
   name: 'InvitePage',
   async asyncData({store}) {
-    const {status} = await store.dispatch('invite/invite/fetchStatus');
-
-    if (status) {
-      await store.dispatch('invite/invite/fetchAll');
-    }
+    return store.dispatch('invite/invite/fetchStatus');
   },
   mounted() {
+    if (this.status) {
+      this.fetchAll();
+    }
     this.$root.reportAppStart();
   },
   data() {
@@ -40,6 +39,9 @@ export default {
   computed: {
     ...mapState(['status'])
   },
+  methods: {
+    ...mapActions(['fetchAll'])
+  },
   components: {
     LayoutApp,
     WelcomePage,

@@ -15,6 +15,13 @@ module.exports = [
     route: /mapp\/alipayform.html/
   },
   {
-    route: /mapp\/selfufo.html/
+    route: /mapp\/selfufo.html/,
+    cacheTime: 60,
+    cache: true
+  },
+  {
+    route: /mapp\/invite\/detail\.html/,
+    cacheTime: 60,
+    cache: true
   }
 ];

@@ -5,11 +5,6 @@ const checkParams = require('../../utils/check-params');
 const apiMaps = require('../../config/api-map');
 
 module.exports = async(req, res, next) => {
-  res.set({
-    'Cache-Control': 'no-cache',
-    Pragma: 'no-cache',
-    Expires: (new Date(1900, 0, 1, 0, 0, 0, 0)).toUTCString()
-  });
   const apiInfo = apiMaps[req.path];
 
   if (!apiInfo) {
@@ -17,6 +12,11 @@ module.exports = async(req, res, next) => {
   }
   let baseParams;
 
+  res.set({
+    'Cache-Control': 'no-cache',
+    Pragma: 'no-cache',
+    Expires: (new Date(1900, 0, 1, 0, 0, 0, 0)).toUTCString()
+  });
   if (!apiInfo.service) {
     baseParams = {
       uid: (req.user && req.user.uid) ? {

@@ -9,6 +9,7 @@ const routes = require('../../config/ssr-routes');
 const redis = require('../../utils/redis');
 const routeEncode = require('../../utils/route-encode');
 const {createBundleRenderer} = require('vue-server-renderer');
+const Handlebars = require('handlebars');
 const logger = global.yoho.logger;
 const config = global.yoho.config;
 
@@ -19,8 +20,11 @@ let renderer;
 let serverBundle;
 let degradeHtml;
 
+const hbs = fs.readFileSync(path.join(__dirname, '../views/index.hbs'), 'utf-8');
+
+const template = Handlebars.compile(hbs);
+
 if (!isDev) {
-  const template = fs.readFileSync(path.join(__dirname, '../../index.html'), 'utf-8');
 
   degradeHtml = fs.readFileSync(path.join(__dirname, '../../degrade.html'), 'utf-8');
 
@@ -29,11 +33,27 @@ if (!isDev) {
 
   renderer = createBundleRenderer(serverBundle, {
     runInNewContext: false,
-    template,
-    clientManifest
+    clientManifest,
+    inject: false
   });
 }
 
+const REG_SCRIPT = /src="([^"]+)"/g;
+
+const asyncLoadScripts = (renderScripts) => {
+  let match;
+  const scripts = [];
+
+  while ((match = REG_SCRIPT.exec(renderScripts))) {
+    scripts.push({
+      src: match[1],
+      index: scripts.length
+    });
+  }
+
+  return scripts;
+};
+
 const getContext = (req) => {
   let res = {
     url: req.url,
@@ -84,11 +104,17 @@ const getCacheKey = (urlPath, cackeKey = '') => {
 const render = (route) => {
   return async(req, res, next) => {
     try {
-      res.set({
-        'Cache-Control': 'no-cache',
-        Pragma: 'no-cache',
-        Expires: (new Date(1900, 0, 1, 0, 0, 0, 0)).toUTCString()
-      });
+      if (!route.cache) {
+        res.set({
+          'Cache-Control': 'no-cache',
+          Pragma: 'no-cache',
+          Expires: (new Date(1900, 0, 1, 0, 0, 0, 0)).toUTCString()
+        });
+      } else {
+        res.set({
+          'Cache-Control': 'max-age=' + route.cacheTime || 60
+        });
+      }
       res.setHeader('X-YOHO-Version', pkg.version);
       const isDegrade = _.get(req.app.locals.wap, 'webapp.degrade', false);
 
@@ -113,10 +139,36 @@ const render = (route) => {
         if (err) {
           return handlerError(err, req, res, next);
         }
+        let styles = context.renderStyles();
+        let scripts = context.renderScripts();
+        let resources = context.renderResourceHints();
+        const states = context.renderState();
+        let asyncScripts;
+        let zk = {
+          webperf: _.get(req.app.locals.wap, 'open.webperf', false),
+          asyncJs: _.get(req.app.locals.wap, 'webapp.ios-async-js', true)
+        };
+
+        if (req.yoho.isiOS && zk.asyncJs) {
+          asyncScripts = asyncLoadScripts(scripts);
+        }
+
+        const result = template({
+          html,
+          styles,
+          scripts,
+          asyncScripts,
+          resources,
+          states,
+          zk,
+          routeHash: routeEncode.getRouter(req)
+        });
+        
+
         if (config.useCache && route.cache && ck) {
-          redis.setex(ck, route.cacheTime || 60, html);
+          redis.setex(ck, route.cacheTime || 60, result);
         }
-        return res.send(html);
+        return res.send(result);
       });
     } catch (error) {
       return next(error);

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>{{title}}</title>
+    <meta name="keywords" content="">
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta content="yes" name="apple-mobile-web-app-capable">
+    <meta content="telephone=no" name="format-detection">
+    <meta content="email=no" name="format-detection">
+    <link rel="dns-prefetch" href="//cdn.yoho.cn">
+    {{{resources}}}
+    {{{styles}}}
+    <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);
+    </script>
+</head>
+<body>
+    {{{html}}}
+    <div id="degrade-app"></div>
+    <div id="main-wrap">
+        <div id="no-download"></div>
+    </div>
+    {{{states}}}
+    {{#if asyncScripts}}
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            setTimeout(function() {
+                var s = document.getElementsByTagName("script")[0];
+                {{# asyncScripts}}
+                var hm{{index}} = document.createElement("script");
+                hm{{index}}.async = true;
+                hm{{index}}.src = "{{src}}";
+                s.parentNode.insertBefore(hm{{index}}, s);
+                {{/ asyncScripts}}
+            }, 200)
+        })
+    </script>
+    {{^}}
+    {{{scripts}}}
+    {{/if}}
+    <script>
+    setTimeout(function() {
+        (function(w, d, s, j, f) {
+            var a = d.createElement(s);
+            var m = d.getElementsByTagName(s)[0];
+
+            w.YohoAcquisitionObject = f;
+
+            w[f] = function() {
+                w[f].p = arguments;
+            };
+
+            a.async = 1;
+            a.src = j;
+            m.parentNode.insertBefore(a, m);
+        }(window, document, 'script', (document.location.protocol === 'https:' ? 'https:' : 'http:') + '//cdn.yoho.cn/yas-jssdk/2.4.18/yas.js', '_yas'));
+
+        var _hmt = _hmt || [];
+
+        (function() {
+            function getUid() {
+                var uid,
+                    name = 'app_uid',
+                    cookies = (document.cookie && document.cookie.split(';')) || [];
+
+                for (var i = 0; i < cookies.length; i++) {
+                    if (cookies[i].indexOf(name) > -1) {
+                        uid = decodeURIComponent(cookies[i].replace(name + '=', '').trim());
+                        break;
+                    }
+                }
+
+                if (!uid) return 0;
+
+                uid = uid.split('::');
+                if (!uid || uid.length < 4) {
+                    return 0;
+                }
+                return uid[1];
+            }
+
+            function queryString() {
+                var vars = {},
+                    hash,
+                    i;
+                var hashes = window.location.search.slice(1).split('&');
+
+                for (i = 0; i < hashes.length; i++) {
+                    hash = hashes[i].split('=');
+                    vars[hash[0]] = hash[1];
+                }
+                return vars;
+            }
+
+            var uid = getUid() || queryString().uid;
+
+            uid = uid === 0 ? '' : uid;
+            window._ozuid = uid; // 暴露ozuid
+            if (window._yas) {
+                window._yas(1 * new Date(), '2.4.16', 'yohoappweb', uid, '', '');
+            }
+
+            (function() {
+                var hm = document.createElement("script");
+                hm.src = "https://hm.baidu.com/hm.js?65dd99e0435a55177ffda862198ce841";
+                var s = document.getElementsByTagName("script")[0];
+                s.parentNode.insertBefore(hm, s);
+            })();
+        }());
+    }, 500);
+    </script>
+</body>
+</html>

@@ -43,6 +43,7 @@
     "express": "^4.16.4",
     "express-session": "^1.15.6",
     "fastclick": "^1.0.6",
+    "handlebars": "^4.1.1",
     "knex": "^0.16.3",
     "lodash": "^4.17.11",
     "lottie-web": "^5.4.2",