React 引css的问题

Question

1. 最近接触react，遇到一个问题，如图，在一个页面，所有的css都被引了进来，想要单独加载对应的css，有什么解决方案吗？

Answer 1

你需要进行代码分割，在react中有以下几种方式

1.import()

使用之前

import { add } from './math';

console.log(add(16, 26));

使用之后

import("./math").then(math => {
  console.log(math.add(16, 26));
});

2.React.lazy

使用之前：

import OtherComponent from './OtherComponent';

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

使用之后

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

以上内容来自官方文档

这是官方原生（16.7）支持的，你也可以使用第三方组件

1. loadable-components
2. react-loadable