NuxtJS优化之增加模版变量

NuxtJS 在渲染页面时，只有固定几个变量，比如：APP、ENV、HEAD 等。而这些远远满足不了自定义的需求。

举个现实的场景：项目中，有些页面使用灵犀系统上报埋点，有些页面不使用，如果把灵犀代码放到统一的页面入口中，对于不使用灵犀的页面而言，反而增加了一个多余的网络请求，影响页面性能。

我们的诉求是，能根据页面路径，动态的追加灵犀代码。

这就需要借助 NuxtJS 提供的 Hooks 来支持。在 nuxt.config.js 增加 hooks ，代码如下：

hooks: {
    'vue-renderer': {
      'ssr:templateParams': (templateParams, renderContext) => {
        const { nuxt } = renderContext;
        const { routePath } = nuxt || {};
        const whiteList = [
          '/light-portal.html',
          '/light-portal/material-detail.html',
          '/light-portal/material.html',
        ];
        // 只有特定页面才加入灵犀
        const shouldAppendLX = whiteList.includes(routePath);
        // 追加 IS_APPEND_LX 全局变量，便于在页面中使用
        Object.assign(templateParams, {
          IS_APPEND_LX: shouldAppendLX,
        });
      },
    },
}

在 app.html 使用「IS_APPEND_LX」变量动态输出灵犀脚本：

{% if (IS_APPEND_LX) { %}
    <script src="//lx.meituan.net/lx.5.min.js"></script>
    <script>
      !function(n,t,e){if(n["_MeiTuanALogObject"]=e,!n[e]){var u=function(){let n=function(){let t=function(){t.q.push([arguments,+new Date])};return t.q=[],n.q.push([arguments,t]),t};return n.q=[],n.t=+new Date,u.q.push([arguments,n]),n};u.q=u.q||[],u.l=+new Date,n[e]=u}}(window,document,"LXAnalytics");
      LXAnalytics('config', {
        defaultCategory:'cs_smart_portal',
        defaultCid: 'c_cs_smart_portal_ntwfxrrs',
        isSPA: false,
        isDev: {{ process.env.ENV !== 'prod' }},
        onWebviewAppearAutoPV: false,
        onVisibilityChangeAutoPV: false,
        onWindowFocusAutoPV: false,
        onVCGap: 2,
        nativeReport:'off',
        use_post: true,
      });
    </script>
{% } %}

NuxtJS优化之增加模版变量

评论