我正在尝试在我的使用服务器端渲染的 create-react-app 应用程序中进行一些代码拆分。
我正在利用“react-loadable”进行代码拆分:https ://github.com/thejameskyle/react-loadable
到目前为止,我只是将我的Home.js
组件与我的应用程序的其余部分分开,只是为了看看它是否有效。在开发模式下(阅读:不是 SSR),它被分块并且工作正常。
但是,我无法在服务器上运行。我正在按照他们的 Github 页面上的指南进行操作,但由于需要进行 webpack 更改而被卡住了。在create-react-app
应用程序中,您无法访问 webpack,因为它被隐藏起来了。
我在启动服务器时收到的错误是:
return (0, _importInspector.report)(import('../components/home/Home'), {
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10) ...
我很确定这是因为我没有按照指南中的说明正确配置 webpack。
在指南中,它明确说明了 SSR:
首先,我们需要 Webpack 告诉我们每个模块存在于哪些包中。为此,有 React Loadable Webpack 插件。
从 react-loadable/webpack 导入 ReactLoadablePlugin 并将其包含在您的 webpack 配置中。向它传递一个文件名,用于存储有关我们的包的 JSON 数据的位置。
// webpack.config.js
import { ReactLoadablePlugin } from 'react-loadable/webpack';
export default {
plugins: [
new ReactLoadablePlugin({
filename: './dist/react-loadable.json',
}),
],
};
我认为如果不弹出,这是不可能的。任何人都知道是否react-loadable
可以在create-react-app
服务器端渲染的应用程序中使用?