NuxtJS优化之减少__Nuxt__体积

NuxtJS 在使用服务端渲染时，会自动往HTML注入当前页面使用的数据，对于只有渲染的页面，在客户端根本用不到这些数据，如果是列表页面，这些数据会偏大，导致整个页面体积变大，造成传输耗时。

诉求是：把用不到的这些数据在页面渲染时去掉。

方案是：利用 NuxtJS 提供的渲染 Hook 解决，代码如下：

hooks: {
  'vue-renderer': {
      'ssr:templateParams': (templateParams, renderContext) => {
        const { APP } = templateParams;
        const { nuxt } = renderContext;
        const { ...state } = nuxt;
        const { config } = state;
        // 去掉 window.__NUXT__ 没有用的信息，只保留环境信息，减少页面体积
        // 环境信息是必须的，不能去掉
        const PATTERN = /<script>window\.__NUXT__=([\s\S]*?)<\/[^>]*script>/i;
        const replaceHTML = APP.replace(PATTERN, () => {
          const stateScript = `window.__NUXT__=${devalue({
            config,
          })};`;
          return `<script>${stateScript}</script>`;
        });
        Object.assign(templateParams, {
          APP: replaceHTML,
        });
      },
  },
},