Стили чанка в пачке и реагировать.

Question

У меня проблема с порядком стилей. В моем случае у меня есть приложение, в котором я использую React.lazy, который разделит наше приложение (JS и CSS) на маленькие куски (чтобы улучшить начальную производительность загрузки). Проблема наступает, когда мы посещаем первую страницу (поэтому мы получим JS + CSS, связанный с этой страницей), затем мы go перейдем на другую страницу (а также извлечем JS + CSS на связанную страницу ). На второй странице мы переопределяли некоторые стили, которые мы использовали на первой странице. Затем мы вернемся к первой странице (мы не будем повторно извлекать CSS и JS на связанную страницу, потому что она у нас есть в кеше), и проблема наступает, потому что переопределение стилей cra sh первой стр. Есть ли способ это исправить? Проблема не будет возникать, если стили со второй страницы не будут переопределять класс CSS компонентов напрямую: (

Answer 1

С помощью style-loader вы можете пометить некоторые из ваших файлов css как ленивые и вызвать .use() при монтировании маршрута и .unuse() при размонтировании маршрута.

import styles from './styles.lazy.css';

export function LegacyRoute() {
  useLayoutEffect(() => {
    styles.use();
    return () => { styles.unuse() };
  }, []);
  return <p>Hello World</p>;
}

webpack config :

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        exclude: /\.lazy\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.lazy\.css$/i,
        use: [
          { loader: 'style-loader', options: { injectType: 'lazyStyleTag' } },
          'css-loader',
        ],
      },
    ],
  },
};

Источник: https://github.com/webpack-contrib/style-loader#lazystyletag