将React和React-DOM依赖外置，能否提升React应用加载速度？

嘿，这个方案完全可行，而且是优化React应用加载速度的经典操作之一！我来给你拆解下为什么有效，以及需要注意的关键点：

为什么外置能提升加载速度？ #

• 大幅减小打包体积：React + React-DOM的生产版打包后大概有几十KB，把它们从你的应用bundle里剥离出去，你的主包体积会立刻变小，浏览器下载和解析的速度自然更快。
• 利用浏览器缓存红利：如果用户之前访问过其他使用相同版本CDN React的网站，浏览器已经缓存了这两个文件，打开你的应用时直接复用缓存，完全不用重新下载，首次加载速度提升非常明显。
• 并行加载资源：CDN上的React脚本和你的应用代码可以并行下载，不会互相阻塞，进一步缩短加载时间。

配置时的关键注意事项 #

虽然方案可行，但细节没做好容易踩坑：

• 版本绝对一致：CDN引入的React/React-DOM版本必须和你项目package.json里依赖的版本完全相同，哪怕小版本差异都可能导致兼容性问题（比如新API不支持、渲染逻辑冲突）。
• 添加降级方案：为了避免CDN故障影响应用，建议在HTML里添加本地fallback脚本，比如：

  <script crossorigin src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
  <script>window.React || document.write('<script src="/path/to/local/react.production.min.js"><\/script>')</script>
  

• 区分开发/生产环境：开发环境建议用本地依赖，方便热更新和调试；只有生产环境才切换到CDN外置，不然开发时可能遇到全局变量冲突或调试不便的问题。
• 正确配置打包工具：需要告诉打包工具（Webpack/Vite）不要把React和React-DOM打进bundle，以Webpack为例：

  module.exports = {
    // ...其他配置
    externals: {
      react: 'React',
      'react-dom': 'ReactDOM'
    }
  }
  

  Vite的配置方式：

  export default {
    build: {
      rollupOptions: {
        external: ['react', 'react-dom'],
        output: {
          globals: {
            react: 'React',
            'react-dom': 'ReactDOM'
          }
        }
      }
    }
  }
  

  同时要在HTML里提前引入CDN脚本，别忘了加crossorigin属性，这是React错误边界等功能正常工作的必要条件。

总结 #

只要配置到位，外置React和React-DOM绝对能有效降低你的应用加载时间，尤其是首次访问的性能提升会很直观。这是很多生产级React应用都会采用的优化手段，放心用就好！

内容的提问来源于stack exchange，提问作者mayankms