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

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'}>

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

Answer 1

你的问题不是真正的少，而是如何以最佳方式捆绑网络应用程序的一般问题。由于您没有提供您的主要应用程序组件或您的 webpack 配置（假设您使用 webpack 进行捆绑），我显然不知道您的设置细节。然而，一般来说，标准配置是将入口点文件可访问的所有组件和其他导入捆绑到一个大文件中。您使用 react router 或类似工具将您的应用拆分为 "pages" 的事实不会改变这一点，因为 react router 只影响渲染的组件，而不影响捆绑。

如果您需要将您的应用分成多个包（IMO 需要考虑相对较大的应用），您可以使用动态导入来制作您的一些组件 "Loadable"。这意味着它们将被放置在一个单独的包中，只在需要时加载。在 react router 文档中有一个关于如何设置它的教程：https://reacttraining.com/react-router/web/guides/code-splitting

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

ReactJS: Load .less only when component is used

less

reactjs