React.lazy是React 16.6版本引入的懒加载组件的新特性，它可以的帮助我们实现代码分割和按需加载。要使用React.lazy，您需要先将一个动态加载的组件封装到import函数中。
以下是使用React.lazy进行代码分割和按需加载的步骤：
例如：
const MyComponent = React.lazy(() => import('./MyComponent'));例如：
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
</div>
);
}在上面的代码中，如果MyComponent组件正在加载中，则会显示“Loading...”。
注意：Suspense组件只能包装一个组件。如果要加载多个组件，请将它们包装到单独的Suspense组件中。
这是React.lazy和Suspense组件结合使用以及导出组件的完整示例：
// MyComponent.js
import React from 'react';
const MyComponent = () => {
return <div>Hello, World!</div>;
};
export default MyComponent;// App.js
import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
</div>
);
}
export default App;注意：要使React.lazy与Webpack的代码分割工作正常，您需要使用Webpack v2或更高版本的动态导入语法。还需要将optimization.splitChunks设置为true，以便Webpack在构建时自动进行代码分割。
总之，React.lazy和Suspense组件结合使用可以实现代码分割和按需加载，在优化应用程序性能方面非常有用。