功能代码在缩小和部署后不再工作

Question

我在 web worker 中有一些代码可以在本地完美运行，但是一旦我构建和部署（缩小代码）它就不再运行了。

未缩小的代码如下所示：

const mapSourceCode = (treeNode, mfi, {objectType, types, fileType, templateType}) => {
        let sourceCodeMap = new Map();
        let ownerMap = new Map();
        let sourceCodeList = [];
        let ownerList = [];

        let mfiMap = new Map();
        mfi.forEach(row => mfiMap.set(row.uuid, row));

        let sourceCodeObjects = mfi.filter(row => types.includes(row.objectTypeUuid));
        if(sourceCodeObjects.length < 1)
            return {sourceCodeMap, sourceCodeTree: undefined};

        try {
            sourceCodeObjects.forEach(sourceObj => {
                let owner = findOwner(sourceObj, sourceObj, mfiMap, {...treeNode.data}, objectType);

压缩后的代码是这样的：

i = function(e, t, n) {
        var c = n.objectType
          , o = n.types
          , i = n.fileType
          , u = n.templateType
          , l = new Map
          , s = new Map
          , f = []
          , p = []
          , m = new Map;
        t.forEach((function(e) {
            return m.set(e.uuid, e)
        }
        ));
        var h = t.filter((function(e) {
            return o.includes(e.objectTypeUuid)
        }
        ));
        if (h.length < 1)
            return {
                sourceCodeMap: l,
                sourceCodeTree: void 0
            };
        try {
            if (h.forEach((function(n) {
                var r = a(n, n, m, Object(d.a)({}, e.data), c);

出错的行是最后一行的 {...treeNode.data}。错误是 ReferenceError: d is not defined

我不知道问题出在哪里？就像我说的，一切都在本地运行良好。非常感谢任何帮助

Answer 1

我发现了这个问题，以防有人遇到同样的事情。通常在使用 web workers 时，你需要告诉你的构建器（webpack）单独构建/编译 workers。我正在使用默认的 create-react-app 配置，它不允许访问 webpack 的那部分。除非你完全退出 create-react-app（我目前还没有准备好这样做）

我正在使用名为 useWorker 的 React 钩子，我将要分配给 worker 的函数传递给它。

当你的代码被优化并且缩小的变量名被更小的名字替换时（我所看到的大部分是 1 或 2 个字母）。因为我没有任何自定义加载器来加载我的工作程序代码，所以它使用全局范围内的变量，假设它可以访问。当代码被提取到主线程之外的单独线程时，它不再能够访问这些变量，因此无法工作。

解决方法是

添加加载器（您可以从 create-react-app 弹出，或者可能有一些 npm 库可以让您访问 webpack 的特定部分）
或者我的解决方案是在字符串中创建函数，然后像这样使用 Function 构造函数创建函数

const generateFunction = new Function('treeNode', 'mfi', 'types', 'action', generateFunctionString);

其中 generateFunctionString 是一个字符串，例如："return a + b"

然后我将该函数传递到我的 useWorker 挂钩中：

const [generatorWorker] = useWorker(generateFunction);

功能代码在缩小和部署后不再工作

Functioning code no longer working after being minified and deployed

javascript

reactjs

minify

web-worker