javascript - React : Good Practices For CDNs, Node_Modules 和两者

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 复制到项目的公共(public)文件目录，然后在页面底部创建简单的变量检查，以在 CDN 调用失败时注入(inject)指向您的服务器的包含内容。例如:

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