React: передовой опыт для CDN, Node_Modules и того и другого

Создавал приложение React поверх create-react-app, которое использует Webpack через реакцию. -scripts и имеет React / Redux / React-dom и т. д. в качестве зависимостей в нашем package.json.

Чтобы использовать эти зависимости JS, мы используем операторы импорта, однако для других зависимостей JS (то есть JS, используемого в Bootstrap и jQuery) мы импортируем их через CDN. (У нас есть файлы CSS Bootstrap в нашем каталоге CSS, и мы используем операторы импорта).

Существует ли общепринятая практика использования CDN вместо node_modules или обоих на стороне интерфейса?

Моя первоначальная мысль заключалась в том, чтобы использовать CDN для получения статических файлов JS, если вы не собираетесь использовать их в качестве импорта в своих файлах JS, но мне было интересно, правильно ли это думать.

Очевидно, что это не конкретный вопрос React, а просто использование React, чтобы дать больше контекста.


reactjs node.js javascript cdn node-modules
person devonj    schedule 26.05.2017    source источник
comment
Вам следует использовать свои собственные версии, поскольку вы делаете доступность своей страницы зависимой от того, какие CDN работают или не меняются. Также потребуется несколько запросов для получения всего кода, поэтому время загрузки обычно будет больше.   -  person Thiatt    schedule 26.05.2017
comment
это определенно имеет смысл, было любопытно, было ли у CDN какое-то конкретное преимущество по сравнению с обслуживанием вашего собственного, поскольку многие сайты все еще используют CDN   -  person devonj    schedule 31.05.2017
comment
@Thiatt Неправильно. Bootstrap и Jquery, скорее всего, уже кэшированы в браузере, а также из разных ресурсов домена могут быть загружены параллельно.   -  person bugwheels94    schedule 01.01.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вот что я обычно делаю:

(1) Настройте webpack.config.js, чтобы глобальные переменные React и ReactDOM были доступны, чтобы предотвратить их перенос, минимизацию и сборку при каждой сборке. Вы по-прежнему можете использовать операторы импорта в своих файлах, как и раньше, но библиотеки не будут в вашем окончательном пакете:

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM'
}

(2) Используйте CDN, например http://www.jsdelivr.com/, что позволяет получить несколько скриптов в виде единой сцепленной строки в одном запросе. Это минимизирует время загрузки.

(3) (Необязательно) Установите React и ReactDOM как deps, и пусть процесс сборки скопирует минифицированные файлы js из node_modules/react(-dom)/dist в каталог общедоступных файлов вашего проекта, а затем создайте простые проверки для переменных внизу страницы, чтобы внедрить включает указывая на ваш сервер, если вызовы CDN не работают. Например:

if (!window.React) {
   $('head').append('<script src="/js/react.min.js">')
}
person Jeff McMahan    schedule 26.05.2017