Nuxt2.14 移除window.__NUXT__

Nuxt版本 2.14

window.__NUXT__存储的是asyncData中return的数据和store数据。

为什么要删除window.__NUXT__？

原因：我们SEO产品经理要求详情页要做一个页面叫“蜘蛛页”，就是只给搜索引擎爬虫的页面，用户是看不到这个页面的。这个页面做完后SEO同事说页面中有window.__NUXT__过多，整个页面170KB，window.__NUXT__就占了100KB，要求删除window.__NUXT__。

以下是我的页面

// 用户页（用户看到的页面）
/zhangsan/1001.html

// 蜘蛛页（仅搜索引擎爬虫访问）
/seo/zhangsan/1001.html

由于该页面仅给搜索引擎爬虫访问，不设计用户交互，所以这个页面可以删除window.__NUXT__

解决方法： nuxt.config.js加入以下代码

// nuxt.config.js

proxy: ...,
build: ...
hooks: {
    'vue-renderer:ssr:context'(context) {
      console.log('nuxt.config-294', context.nuxt); // 这里打印出来就是window.__NUXT__的内容
      const routePath = JSON.stringify(context.nuxt.routePath);
      // path中包含/seo的页面生效
      if (context.nuxt.routePath.includes('/seo')) {
        // context.nuxt = { serverRendered: true, routePath }; // 这行代码会导致你的自定义状态失效
        // 这两行是正确用法
        context.nuxt['serverRendered'] = true
        context.nuxt['data'] = null
      }
    }
}

# 最好不好这么使用：
# 我的内容404后突然有一天发现明明代码走的是404逻辑，然而浏览器却显示200，就是这个原因导致的
context.nuxt = { serverRendered: true, routePath };

# 这行代码会导致你的自定义状态失效：
return ctx.error({
    message: '内容不存在！',
    path: ctx.route.fullPath,
    statusCode: 404,
});
# 因为服务端渲染后在页面window.__NUXT__中会有这段代码
error: {
    message: "资讯不存在-oss返回错误",
    path: "\u002Fseo\u002Finformation\u002F100781.html?223331",
    statusCode: 404
},

验证效果：

/zhangsan/1001.html       170KB
/seo/zhangsan/1001.html   50KB(移除window.__NUXT__后)

访问"/seo/zhangsan/1001.html"这个页面，打开浏览器控制台 —— 打开Network，选择“文档”，查看服务端返回的html页面，已从170KB变成50KB，在这个html中搜索window.__NUXT__：

window.__NUXT__ = {
    serverRendered: true,
    routePath: "...."
};