IE11由于Webpack + React + TypeScript长时间运行脚本错误,导致IE11没有响应。

问题描述 投票:0回答:1

我使用的是 webpack 4.* 捆绑我的 react 16.*typescript 3.* 项目!在我们心爱的internet explorer 11上,我得到。不响应长期运行的脚本错误 项目永远不会加载......无论在本地还是测试服务器(生产模式)。

我找不到哪边的项目是不支持IE11的,因为它没有给我那么多信息,我在网上也找不到类似的东西......下面是它的样子。

enter image description here

和我的相关设置是。

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";
...

我想这可能更多的是跟我的代码有关,而不是第三方的lib...... 我没有使用jQuery,同样的代码也能正常使用。nwb! 我刚刚把bundler改成了webpack,并且把npm包更新到了最新的版本

如果需要更多的信息,我可以通过帖子更新分享给大家

reactjs typescript internet-explorer-11 webpack-4
1个回答
0
投票

这个问题是一个巨大的内存泄漏,不知何故造成的。[email protected]!

enter image description here

由于它只用在两个地方,我把它的包扔了,换成了内置的 RegExp 现在一切都好了!

我最初的错误是,我太过依赖 Network 标签! Performance 在DevTool中的部分是更有效和有用的方式

© www.soinside.com 2019 - 2024. All rights reserved.