![](/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.