Next.js兼容低版本浏览器
<h1 id="nextjs-兼容低版本浏览器">Next.js 兼容低版本浏览器</h1><h4 id="chrome--70">chrome < 70</h4>
<h2 id="1globalthis">1.globalThis</h2>
<p>chrome > 70 才支持 globalThis</p>
<blockquote>
<p>该 api 在 Next 框架源码中被调用</p>
</blockquote>
<ol>
<li>通过配置 polyfill</li>
</ol>
<pre><code> yarn add regenerator-runtime core-js
</code></pre>
<ol start="2">
<li>.babelrc</li>
</ol>
<pre><code class="language-json">{
"presets": [
[
"next/babel",
{
"preset-env": {
"targets": {
"browsers": ["last 2 versions", "ie >= 11"]
},
"useBuiltIns": "usage",
"corejs": 3
}
}
]
],
"plugins": [
"@babel/plugin-proposal-do-expressions",
"@babel/plugin-syntax-optional-chaining"
]
}
</code></pre>
<ol start="3">
<li>在根文件下引入</li>
</ol>
<pre><code class="language-javascript">import 'core-js/stable'
import 'regenerator-runtime/runtime'
</code></pre>
<h2 id="2queuemicrotask">2.queueMicrotask</h2>
<p>chrome > 70 才支持 globalThis</p>
<ol>
<li>通过<code><Script></code>标签，处理该 api</li>
</ol>
<pre><code class="language-javascript"><Script strategy="beforeInteractive">
{`
if (!window.queueMicrotask) {
window.queueMicrotask = function(callback) {
Promise.resolve().then(callback);
};
}
`}
</Script>
</code></pre>
<blockquote>
<p>beforeInteractive 会在页面加载完成后，水合前执行，并且阻塞线程</p>
</blockquote>
<h2 id="3failed-to-execute-observe-on-performanceobserver-required-member-entrytypes-is-undefined">3.Failed to execute 'observe' on 'PerformanceObserver': required member entryTypes is undefined.</h2>
<p>chrome > 51 支持</p>
<ol>
<li>通过<code><Script></code>标签，处理</li>
</ol>
<pre><code class="language-javascript"><Script strategy="beforeInteractive">
{`
(function () {
if (typeof window === 'undefined') return;
if (!('PerformanceObserver' in window)) {
window.PerformanceObserver = function () {
return {
observe: function () {},
disconnect: function () {},
takeRecords: function () { return []; }
};
};
window.PerformanceObserver.supportedEntryTypes = [];
} else if (!PerformanceObserver.supportedEntryTypes) {
PerformanceObserver.supportedEntryTypes = [];
}
})();
`}
</Script>
</code></pre>
<h2 id="解决思路">解决思路</h2>
<ol>
<li>通过 polyfill 第三方库进行低版本兼容</li>
<li>在根布局入口文件中<code>/app//layout.tsx</code>，利用<code><Script></code>，在页面加载完成和 react 水合前，阻塞线程，强制在 window 上加上低版本不支持的属性或方法</li>
</ol><br><br>
来源：https://www.cnblogs.com/karle/p/18893590
頁:
[1]