由于 Webpack + React + TypeScript 长时间运行脚本错误，IE11 没有响应答案

【问题标题】：IE11 is not responding due to a long running script error with Webpack + React + TypeScript由于 Webpack + React + TypeScript 长时间运行脚本错误，IE11 没有响应
【发布时间】：2020-04-23 09:26:26
【问题描述】：

我正在使用webpack 4.* 捆绑我的react 16.* 和typescript 3.* 项目！在我们心爱的 Internet Explorer 11 上，我得到：没有响应长时间运行的脚本错误并且项目永远不会加载...在本地和测试服务器（生产模式）中

我不知道 IE11 不支持项目的哪一边，因为它没有给我太多信息，而且我在互联网上也找不到类似的东西......这是它的外观：

我的相关设置是：

webpack.base.js

module.exports = {
    entry: {
        app: path.resolve(__dirname, "./src/index.tsx"),
    },
    output: {
        path: path.resolve(__dirname, "./build/dist"),
        publicPath: "public",
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json", ".sass"],
        alias: {
            // .... some internal aliases
        },
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
            },
            {
                test: /\.(ts|tsx)?$/,
                exclude: /node_modules/,
                loader: "ts-loader",
            },
            {
                test: /\.(gif|jpg|jpeg|svg|png|webp|eot|otf|ttf|woff|woff2|mp4|ogg|webm)$/i,
                loader: "url-loader",
                options: {
                    limit: 1,
                    name: "[name].[hash:8].[ext]",
                },
            },
        ],
    },
    optimization: {
        runtimeChunk: "single",
        splitChunks: {
            chunks: "all",
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "initial",
                    name: "vendor",
                    enforce: true,
                },
            },
        },
    },
    plugins: [
        new webpack.DefinePlugin({
            // ...
        }),
        new HtmlWebpackPlugin({
            template: "src/index.ejs",
            hash: true,
            // ... some internal values to be injected to the template, like gtm and etc
        }),
    ],
}

tsconfig.json

"compilerOptions": {
    "module": "esnext",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "esModuleInterop": true,
    "jsx": "react",
    "moduleResolution": "node",
    ...
}

index.tsx

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import React from "react";
...

我认为它可能与我的代码而不是 3rd 方库更相关...我没有使用 jQuery，并且相同的代码可以在 nwb 上正常工作！我刚刚将捆绑器更改为 webpack，并将 npm 包更新为最新版本

如果需要更多信息，我可以通过发布更新分享

【问题讨论】：

js文件的大小是多少？尝试使用 webpack-boundle-analyzer 检测可以从主 js 文件中拆分出哪些代码
最大的一个 (app) 是 1.30 MB 并且所有其他的都被正确提取出来......我确实使用 webpack-boundle-analyzer。相同的文件适用于更大尺寸的旧捆绑器（大约2.0 MB）
这个问题是否只出现在IE 11浏览器中，请检查其他浏览器（如Edge和Chrome）是否正常运行？另外，能否把 webpack 配置文件贴出来或者创建一个Minimal, Complete, and Verifiable example 来重现问题。
它只发生在 IE11 上！不是在其他人身上，甚至不是 Edge 的早期版本......我在所有这些人身上都测试过，然后在这里发布；）用基本的 webpack 配置更新了帖子

标签： reactjs typescript internet-explorer-11 webpack-4

【解决方案1】：

我对 XRegExp 也有同样的问题。似乎包括在 webpack 包中的内容会生成此内存链接。就我而言，我在 index.html 中包含 XRegExp 并且它可以工作......

<script src="https://unpkg.com/xregexp/xregexp-all.js"></script>

【讨论】：

【解决方案2】：

问题是一个巨大的内存泄漏，不知何故是由xregexp@4.3.0引起的！

由于只在两个地方使用过，所以我把包去掉，换成内置的RegExp，现在一切都好了！

我最初的错误是我过于依赖Network 标签！ DevTool 中的Performance 部分更加高效和有用

【讨论】：