Question

我可能缺少对在ReactJS中加载更少文件的基本理解，但是我无法解决以下问题。

我创建了组件，并为每个组件创建了更少的文件，例如：

import * as React from 'react';
import Row from 'antd/lib/row';
import Col from 'antd/lib/col';
import { NavLink } from 'react-router-dom';
import '../styles/how-it-works-styles.less';
import Icon from 'antd/lib/icon';


class HowItWorksComponent extends React.PureComponent<Props> {

  public constructor(props: Props) {
      super(props);
  }

  public render() {
    return (
        <Row className={'steps-row'}>

现在，当我加载一个根本不使用此组件的页面时，较少的文件仍在加载到dom中。有人可以解释为什么发生这种情况，以及我如何防止这种情况发生？

Answer 1

您的问题并不是真正的少，而是一个如何以最佳方式捆绑Web应用程序的普遍问题。由于您没有提供主要的应用程序组件或webpack配置（假设您使用的是webpack进行捆绑），因此我显然不知道设置的详细信息。但是，通常，标准配置是将入口点文件可到达的所有组件和其他导入捆绑到一个大文件中。您使用React Router或类似的工具将您的应用拆分为“页面”这一事实并不会改变这一点，因为React Router仅会影响何时渲染哪些组件，而不会影响捆绑。

如果您需要将应用程序分成多个捆绑包（IMO需要考虑一个相对较大的应用程序），则可以使用动态导入将某些组件设置为“可加载”。这意味着它们将被放置在单独的捆绑包中，仅在需要时才加载。 React Router文档中有一个有关如何进行设置的教程：https://reacttraining.com/react-router/web/guides/code-splitting

ReactJS：仅在使用组件时加载.less

1 个答案: