ReactJS: загружать .less только при использовании компонента - PullRequest
Новая
       8

ReactJS: загружать .less только при использовании компонента

0 голосов
/ 04 ноября 2018

Возможно, мне не хватает базового понимания загрузки меньшего количества файлов в 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. Может кто-нибудь объяснить, почему это происходит и как я могу предотвратить это?

1 Ответ

0 голосов
/ 04 ноября 2018

Ваша проблема на самом деле не в меньшем, а в общей проблеме оптимального комплектования веб-приложения. Поскольку вы не предоставляете свой основной компонент приложения или конфигурацию вашего веб-пакета (при условии, что вы используете веб-пакет для пакетирования), я, очевидно, не знаю деталей вашей настройки. В целом, однако, стандартная конфигурация заключается в объединении всех компонентов и других импортируемых файлов, доступных из файла точки входа, в один большой файл. Тот факт, что вы используете реагирующий маршрутизатор или аналогичный для разделения вашего приложения на «страницы», это не меняет, поскольку реагирующий маршрутизатор влияет только на то, какие компоненты отображаются, а не на связывание.

Если вам нужно разделить ваше приложение на несколько пакетов (что IMO требует относительно большого приложения для рассмотрения), вы можете использовать динамический импорт, чтобы сделать некоторые из ваших компонентов «загружаемыми». Это означает, что они будут помещены в отдельный пакет, который загружается только по мере необходимости. В документации по маршрутизатору реакции есть руководство по настройке: https://reacttraining.com/react-router/web/guides/code-splitting

...