控制/自定义 Production React 中的组件名称缩小

Question

背景

我经常使用“ React Developer Tools ”来了解我喜欢的各种网站的组件结构并从中获取灵感。尽管许多网站都有组件的随机名称，但很少有网站具有可区分的名称，这对有抱负的 React 开发人员或爱好者有帮助。其中一个网站是https://www.joshwcomeau.com。下面是他网站中其中一个页面的屏幕截图。少数组件的名称本身就解释了它将呈现什么。由于这是他的博客，他在其中讨论了 React 开发的各种提示和技巧，因此看看这个会很有帮助。

问题

现在，当我使用 create-react-app( ) 开发网站时CRA，Webpack 将我所有的组件名称缩小为几个随机字母。我怎样才能控制这种行为？

注意：我的主要问题是 - 如何在任何 React 应用程序（不仅仅是CRA）中控制此行为。我知道 Josh 在他的博客中使用 Next.js，那么 Gatsby、Next 等框架是否提供对此的控制？。

笔记：

• 我知道组件名称在开发模式中是可见的，但我希望它在生产中也可见（出于上面“背景”中解释的原因）。
• 我知道 webpack 可以生成“sourcemap”，但这样做会暴露我的整个代码结构。所以我不想使用源映射

乔什的网站截图	我的网站截图

Answer 1

您可以使用第三方库来实现此目的：

来自webpack-react-component-name 文档：

通常，React 组件名称在编译期间会被缩小。该插件通过挂钩 Webpack 的编译过程、遍历 AST 查找 React 组件定义并更新发出的源代码以填充 displayName 属性，使这些组件名称在生产包中可用。填充后，React Dev Tools 扩展将使用该属性来确定组件的名称。

所以你可以安装这个 webpack 插件：

npm install webpack-react-component-name -save-dev

安装后，将插件添加到 webpack 配置中的插件列表中：

  plugins: [
    new WebpackReactComponentNamePlugin()
  ],