![](/img/trans.png)
[英]IE11 Blank Page with React, Typescript, Babel, and Webpack
[英]IE11 is not responding due to a long running script error with Webpack + React + TypeScript
我正在使用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";
...
我认为它可能与我的代码而不是第 3 方库更相关......我没有使用 jQuery 并且非常相同的代码适用于nwb ! 我刚刚将捆绑器更改为 webpack 并将 npm 包更新为最新版本
如果需要更多信息,我可以通过发布更新分享
我对 XRegExp 有同样的问题。 似乎包括 webpack 捆绑包中的内容会生成此 memory 链接。 在我的情况下,我在我的 index.html 中包含 XRegExp 并且它可以工作......
<script src="https://unpkg.com/xregexp/xregexp-all.js"></script>
问题是一个巨大的 memory 泄漏,不知何故由xregexp@4.3.0引起!
因为它只在两个地方使用过,所以我去掉了 package 并用内置的RegExp
替换它,现在一切都很好!
我最初的错误是我过于依赖Network
选项卡! DevTool 中的Performance
部分更加高效和有用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.