Webpack的组块样式和react.lazy

Question

我正面临着与风格顺序相关的问题。在我的例子中，我有一个应用程序，我使用的是React.lazy，它会将我们的应用程序( JS和CSS )分成小块(以提高初始加载性能)。当我们访问第一个页面时，问题来了(所以我们将获取与该页面相关的JS + CSS )，然后我们将转到另一个页面(也将JS + CSS获取到相关页面)。在第二个页面上，我们覆盖了第一个页面上使用的一些样式。然后我们将返回到第一个页面(我们不会将CSS和JS重新获取到相关页面，因为我们将其放在缓存中)，问题就来了，因为覆盖样式会导致第一个页面崩溃。有没有办法解决这个问题？如果来自第二个页面的样式不会直接覆盖组件的CSS类，那么问题就不会出现:(

Answer 1

使用样式加载器，您可以将一些css文件标记为惰性，并在挂载路由时调用.use()，在卸载路由时调用.unuse()。

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

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

webpack配置：

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