React SSR重构踩坑记录(持续更新)

2024-02-01 09:21:11

从CommonJS到ES6：模块引入和导出方式的冲突

当我第一次在Node.js中直接使用import Story from '../js/containers/story';时，遇到了一个错误：

ReferenceError: Story is not defined

经过一番研究，我发现这是因为Node.js本身使用的是CommonJS的语法，支持的模块引入和导出方式为require以及module.export，而ES6定义的import和export与之不同。

为了解决这个问题，我需要使用Babel将ES6代码转换为CommonJS代码。Babel是一个JavaScript编译器，可以将ES6代码转换为ES5代码或CommonJS代码。

安装Babel后，我需要在项目中创建一个.babelrc文件，并将其配置为将ES6代码转换为CommonJS代码：

{
  "presets": ["@babel/preset-env"]
}

这样，我就可以在Node.js中使用ES6代码了。

避免循环引用

在重构过程中，我还遇到了循环引用的问题。循环引用是指两个模块互相引用对方，导致无法正确加载模块。

为了避免循环引用，我需要使用webpack的splitChunks插件将模块拆分为多个块，并使用import()动态加载模块。

在webpack.config.js文件中，我需要添加以下配置：

optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 30000,
    maxSize: 0,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    automaticNameDelimiter: '~',
    name: true,
  },
}

这样，webpack就会将模块拆分为多个块，并使用import()动态加载模块。

使用React.lazy()动态加载组件

在重构过程中，我还使用了React.lazy()来动态加载组件。React.lazy()可以将组件的加载延迟到需要的时候，从而提高应用程序的性能。

在使用React.lazy()时，我需要在组件中使用Suspense组件。Suspense组件可以显示一个占位符，直到组件加载完成。

import React, { lazy, Suspense } from 'react';

const Story = lazy(() => import('../js/containers/story'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Story />
    </Suspense>
  );
};

export default App;