React：CDN，Node_Modules和Both的良好实践

Question

在create-react-app之上构建一个React应用程序，它通过react-scripts使用Webpack，并在我们的package.json中使用React / Redux / React-dom等作为依赖项。

为了使用这些JS依赖项，我们使用import语句，但是，对于其他JS依赖项（即Bootstrap和jQuery中使用的JS），我们通过CDN导入它们。 （我们在CSS目录中有Bootstrap CSS文件，并使用import语句）。

是否普遍接受在前端使用CDN与node_modules或两者的做法？

我最初的想法是使用CDN来获取静态JS文件，如果你不打算在JS文件中将它们用作导入，但是想知道这是否是考虑它的正确方法。

显然，这不是React特定的问题，只是使用React来提供更多的上下文。

Answer 1

这是我一般做的事情：

（1）设置webpack.config.js以假设全局React和ReactDOM变量可用，以防止它们在每次构建时被转换，缩小和捆绑。您仍然可以像以前一样在文件中使用import语句，但这些库不会出现在最终的包中：

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

（2）使用像http://www.jsdelivr.com/这样的CDN，它允许您在单个请求中将多个脚本作为单个连接字符串。这样可以最大限度地缩短装载时间。

（3）（可选）将React和ReactDOM安装为deps，并让构建过程将缩小的js文件从node_modules/react(-dom)/dist复制到项目的公共文件目录，然后创建简单的检查如果CDN调用失败，则页面底部的变量注入包括指向您的服务器。例如：

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