我有一个单页面应用程序，每个路由都进行了代码分割。当我部署新版本的应用程序时，如果用户仍然打开页面并访问他们以前未访问过的路由，通常会出现错误。
另一种可能发生这种情况的场景是，如果应用程序启用了服务工作者，则用户访问新部署后的页面后，服务工作者将从缓存中提供服务。然后，如果用户尝试访问不在其缓存中的页面，则会出现块加载失败。
目前，我禁用了应用程序中的代码分割以避免此问题，但我一直很好奇如何处理这个问题的最佳方法。我考虑过在用户完成初始页面的加载后预加载所有其他路线，我认为这可能会解决路由上的代码拆分问题。但是，假设我想对组件进行代码拆分，那么这意味着我必须尝试找出何时以及如何预加载所有这些组件。
所以我想知道人们如何处理单页面应用程序的这个问题？谢谢！（我当前正在使用create-react-app）
我更喜欢让用户手动刷新而不是自动刷新（这样可以防止无限刷新循环错误）。
对于React应用程序，以下策略效果很好，在路由上进行代码分割：
将您的index.html设置为永不缓存。这确保了请求初始资产的主要文件始终是新鲜的（通常它不大，因此不缓存它不应该成为问题）。请参见MDN Cache Control。
为您的块使用一致的块哈希。这样可以确保只有更改的块才会具有不同的哈希值。（请参见下面的webpack.config.js片段）
不要在部署时使CDN的缓存失效，这样旧版本在部署新版本时不会失去其块。
在导航到其他路由时检查应用程序版本，以便在用户运行旧版本时通知他们并请求刷新。
最后，以防发生ChunkLoadError：添加一个错误边界。 （请参见下面的错误边界）
optimization: {
moduleIds: 'hashed',
splitChunks: {
cacheGroups: {
default: false,
vendors: false,
// vendor chunk
vendor: {
name: 'vendor',
// async + async chunks
chunks: 'all',
// import file path containing node_modules
test: /node_modules/,
priority: 20
},
}
}
import React, { Component } from 'react'
export default class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true, error };
}
componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
console.error('Error Boundary Caught:', error, errorInfo);
}
render() {
const {error, hasError} = this.state
if (hasError) {
// You can render any custom fallback UI
return <div>
<div>
{error.name === 'ChunkLoadError' ?
<div>
This application has been updated, please refresh your browser to see the latest content.
</div>
:
<div>
An error has occurred, please refresh and try again.
</div>}
</div>
</div>
}
return this.props.children;
}
}
注意：确保在内部导航事件（例如使用react-router时）清除错误，否则错误边界将在内部导航之后继续存在，并且只有在实际导航或页面刷新时才会消失。
Uncaught SyntaxError: Unexpected token < 9.70df465.chunk.js:1
更新
我们解决这个问题的方法是将我们的应用程序变为渐进式Web应用程序，以便利用服务工作者。
将create react app转换成PWA很容易。 有关PWA的CRA文档
然后要确保用户始终使用最新版本的服务工作者，我们确保每当有等待更新的工作者时，我们会告诉它SKIP_WAITING，这意味着下次刷新浏览器时，他们将获得最新的代码。
import { Component } from 'react';
import * as serviceWorker from './serviceWorker';
class ServiceWorkerProvider extends Component {
componentDidMount() {
serviceWorker.register({ onUpdate: this.onUpdate });
}
onUpdate = (registration) => {
if (registration.waiting) {
registration.waiting.postMessage({ type: 'SKIP_WAITING' });
}
}
render() {
return null;
}
}
export default ServiceWorkerProvider;<script>
window.onerror = function (message, source, lineno, colno, error) {
if (error && error.name === 'SyntaxError') {
window.location.reload(true);
}
};
</script>
我希望有更好的方式，但这是我能想到的最好的方法，并且感觉这是一个相当安全的解决方案，因为 create-react-app 不会编译或构建任何语法错误，这应该是我们唯一会遇到语法错误的情况。
// import the component for the route just like you would when
// doing async components
const ChunkedRoute = asyncComponent(() => import('components/ChunkedRoute'))
// use it in the route just like you normally would
<Route path="/async/loaded/route" component={ChunkedRoute} />
asyncComponent.js
import React, { Component } from 'react'
const asyncComponent = importComponent => {
return class extends Component {
state = {
component: null,
}
componentDidMount() {
importComponent()
.then(cmp => {
this.setState({ component: cmp.default })
})
.catch(() => {
// if there was an error, just refresh the page
window.location.reload(true)
})
}
render() {
const C = this.state.component
return C ? <C {...this.props} /> : null
}
}
}
export default asyncComponent
.catch(error => {
if (error.toString().indexOf('ChunkLoadError') > -1) {
console.log('[ChunkLoadError] Reloading due to error');
window.location.reload(true);
}
});
export default class Async extends React.Component {
componentWillMount = () => {
this.cancelUpdate = false;
this.props.load
.then(c => {
this.C = c;
if (!this.cancelUpdate) {
this.forceUpdate();
}
})
.catch(error => {
if (error.toString().indexOf('ChunkLoadError') > -1) {
console.log('[ChunkLoadError] Reloading due to error');
window.location.reload(true);
}
});
};
componentWillUnmount = () => {
this.cancelUpdate = true;
};
render = () => {
const props = this.props;
return this.C ? (
this.C.default ? (
<this.C.default {...props} />
) : (
<this.C {...props} />
)
) : null;
};
}
我有一个问题的解决方案！
我遇到了相同的情况。在我的情况下，我在React项目中使用Vite，并且每次rollup生成包块时，都会生成不同的哈希值，这些哈希值包含在文件名中（例如：LoginPage.esm.16232.js）。我还在我的路由中使用了很多代码分割。因此，每次部署到生产环境时，块名称都会更改，这将导致客户端每次单击指向旧块的链接时生成空白页面，并且只有当用户刷新页面时（强制页面使用新块）才能解决该问题。
我的解决方案是为我的React应用程序创建一个ErrorBoundary包装器，它会“拦截”错误并显示漂亮的错误页面，解释问题并提供重新加载页面（或自动重新加载）的选项。