reactjs - 在生产反应中控制/自定义组件名称缩小

Question

背景

我经常使用“ React Developer Tools ”来了解我喜欢的各种网站的组件结构并从中获得灵感。虽然，很多网站的组件名称都是随机的，但很少有网站具有可区分的名称，这对有抱负的 React 开发人员或爱好者很有帮助。一个这样的网站是https://www.joshwcomeau.com。下面是他网站上其中一个页面的截图。少数组件的名称说明了它将要呈现的内容。由于这是他的博客，他在其中讨论了 React 开发的各种技巧和窍门，所以看看这个会很有帮助。

问题

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

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

笔记：

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

乔希的网站截图	我的网站截图

标签： reactjs

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()
  ],