Question

我有一个在开发环境中工作得很好的应用程序，但它不能在生产中工作，这是由uglify引起的（我想是这样）

我有一个用户构建的数据，我将其保存到文件或LocalStorage（两种情况下都是json所以无关紧要）。

该结构由3种类型的节点构成。我已经在基类中实现了属性（所有都继承自一个类）：type =this.constructor.name并且它在开发中运行良好。当我加载应用程序并读取缓存时，我会浏览JSON并使用switch (obj.type) case class1.name...等重建对象。它运行良好。

但是，当我为生产而构建时，当我致电class1.name或class2.name或class3.name时，它们都返回e，这使得无法恢复正确的对象......

我不认为这是特定于框架的问题，但如果有人需要知道我使用VueJS和Quasar Framework构建。

有什么想法吗？

Answer 1

在客户端JavaScript中永远不应该依赖

constructor.name或任何其他函数name属性，因为缩小是生产环境中必须的，并且具有有意义名称的函数将成为单字母命名函数。 e是使用UglifyJS缩小的函数的通用名称。这就是为什么uglified JS文件的占用空间小于未编译文件的原因。

如果函数/类名用于除调试之外的任何内容，则应将它们显式指定为静态属性。由于name无法在某些引擎中重新定义，non-standard displayName（也可用于调试）或任何其他属性名称都可以使用：

class Foo {
  static get id() { return 'Foo' }
  ...
}

或者：

class Foo {
  ...
}
Foo.id = 'Foo';

Answer 2

对于任何追随者

Webpack使用UglifyJS来压缩和隐藏代码的各个方面（称为“缠结”），特别是针对您的问题，它将所有类转换为e，您必须在webpack中指定其中一个如果您想保留类名和/或函数名，则config或cli不执行此操作。

您可以通过删除最小化或创建自己的优化实例来禁用此行为，如here

在uglify / webpack生产之后，每个类的Class.name始终为'e'

2 个答案: