В чем разница между импортом css или css ссылки в приложении React?

Question

В приложении React я могу включить свой CSS с помощью import или <link> в файл index.html (например, из CDN).
В чем разница?
Есть ли существенная разница в производительности между этими двумя методами?

Чтобы было ясно, я имею в виду этот тип импорта из файла * js или * .jsx:

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";

Answer 1

Теоретически, единственное различие между ними заключается в том, что импорт - это механизм CSS для включения таблицы стилей и механизм HTML. Однако браузеры обрабатывают их по-разному, что дает явное преимущество с точки зрения производительности.

Кроме того, использование тега позволяет определять «предпочтительные» и альтернативные таблицы стилей. Вы не можете сделать это с помощью импорта.

В целом, тег обрабатывается быстрее, чем правило импорта (что, по-видимому, несколько медленнее в отношении механизма обработки css).