如何配置为什么使用 NextJS 12 进行渲染

Question

Next.JS 使用 babel 配置 Why Did You Render.

module.exports = function (api) {
    const isServer = api.caller((caller) => caller?.isServer)
    const isCallerDevelopment = api.caller((caller) => caller?.isDev)

    const presets = [
        [
            'next/babel',
            {
                'preset-react': {
                    importSource:
                        !isServer && isCallerDevelopment
                            ? '@welldone-software/why-did-you-render'
                            : 'react'
                }
            }
        ]
    ]

    return {presets}
}

如何在不禁用 SWC 的情况下将其更新为 Next.JS12？

Answer 1

经过一番试验，我得出了最终结论：

您可以通过 next.config.js 配置来实现，这不会禁用 SWC，但您应该注意以下几点：

首先你需要完全停止开发服务器；
然后您必须擦除 .next 文件夹或您构建的任何路径；
最后，创建一个名为 scripts 的文件夹，并在其中创建一个名为 whyDidYouRender.js 的文件。

现在编辑您的配置文件

// next.config.js:
const path = require('path');

module.exports = {
  /**
   * @param {{[key: string]: unknown}} config
   * @param {{isDev: boolean; isServer: boolean;}} options
   */
  webpack(config, { dev, isServer }) {
    // why did you render
    if (dev && !isServer) {
      const originalEntry = config.entry;
      config.entry = async () => {
        const wdrPath = path.resolve(__dirname, './scripts/whyDidYouRender.js')
        const entries = await originalEntry();
        if (entries['main.js'] && !entries['main.js'].includes(wdrPath)) {
          entries['main.js'].unshift(wdrPath);
        }
        return entries;
      };
    }

    return config;
  },
};

并编辑 whyDidYouRender 文件

// scripts/whyDidYouRender.js
import React from 'react';

if (process.env.NODE_ENV === 'development') {
  // eslint-disable-next-line
    const whyDidYouRender = require('@welldone-software/why-did-you-render');
  // @ts-ignore
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

如果您仍然遇到问题，可以替换此行：

if (process.env.NODE_ENV === 'development')

与

if (process.env.NODE_ENV === 'development' && typeof window === 'object')

或者您可以完全删除此检查，因为仅当 webpack 的选项 dev 为真且选项 isServer 为假时才应该导入此文件

PS.: 请注意，如果没有问题，why-did-you-render 可能会运行静默，因此没有控制台消息并不一定意味着它不是运行ning .你可以创建一个问题来测试它

如何配置为什么使用 NextJS 12 进行渲染

How to configure Why Did You Render with NextJS 12

rerender

reactjs

babeljs

next.js

swc-compiler