Next.js兼容低版本浏览器

Next.js 兼容低版本浏览器

chrome < 70

1.globalThis

chrome > 70 才支持 globalThis

该 api 在 Next 框架源码中被调用

1. 通过配置 polyfill

	yarn add regenerator-runtime core-js

2. .babelrc

{
	"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"
	]
}

3. 在根文件下引入

import 'core-js/stable'
import 'regenerator-runtime/runtime'

2.queueMicrotask

chrome > 70 才支持 globalThis

1. 通过<Script>标签，处理该 api

<Script strategy="beforeInteractive">
	{`
	if (!window.queueMicrotask) {
		window.queueMicrotask = function(callback) {
			Promise.resolve().then(callback);
		};
	}
`}
</Script>

beforeInteractive 会在页面加载完成后，水合前执行，并且阻塞线程

3.Failed to execute 'observe' on 'PerformanceObserver': required member entryTypes is undefined.

chrome > 51 支持

1. 通过<Script>标签，处理

<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>

解决思路

1. 通过 polyfill 第三方库进行低版本兼容
2. 在根布局入口文件中/app/[locale]/layout.tsx，利用<Script>，在页面加载完成和 react 水合前，阻塞线程，强制在 window 上加上低版本不支持的属性或方法