react-app-rewired实现预加载与预连接资源

【免费下载链接】react-app-rewired Override create-react-app webpack configs without ejecting 项目地址: https://gitcode.com/gh_mirrors/re/react-app-rewired

你是否遇到过React应用首次加载缓慢的问题？用户点击链接后需要等待几秒才能看到内容？本文将介绍如何使用react-app-rewired在不执行eject操作的情况下，通过预加载（Preload）和预连接（Preconnect）技术优化资源加载性能，让你的应用加载速度提升40%以上。读完本文后，你将能够：配置关键资源预加载、设置第三方域名预连接、通过Webpack插件自动生成资源提示，并验证优化效果。

什么是预加载与预连接

资源预加载（Preload）是一种浏览器机制，允许你指定页面很快会用到的关键资源，确保浏览器提前加载这些资源，提高访问速度。预连接（Preconnect）则允许浏览器提前建立到第三方域名的连接，包括DNS解析、TCP握手和TLS协商，减少跨域请求的延迟。

react-app-rewired是一个可以覆盖create-react-app Webpack配置的工具，通过config-overrides.js文件，我们可以轻松添加资源预加载和预连接功能，而无需执行eject操作。

准备工作：安装react-app-rewired

首先确保你的项目中已安装react-app-rewired。如果尚未安装，可以通过以下命令进行安装：

npm install react-app-rewired --save-dev

然后在项目根目录创建config-overrides.js文件，这是我们自定义Webpack配置的主要文件。同时，需要修改package.json中的scripts，将react-scripts替换为react-app-rewired：

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

配置资源预加载

使用react-app-rewire-preload-plugin

社区已经有现成的插件可以帮助我们实现资源预加载，例如react-app-rewire-preload-plugin。首先安装该插件：

npm install react-app-rewire-preload-plugin --save-dev

然后在config-overrides.js中添加以下配置：

const rewirePreloadPlugin = require('react-app-rewire-preload-plugin');

module.exports = function override(config, env) {
  // 添加预加载插件
  if (env === 'production') {
    config = rewirePreloadPlugin(config, env, {
      rel: 'preload',
      include: 'initial',
      fileBlacklist: [/\.map$/, /hot-update\.js$/]
    });
  }
  return config;
};

这个配置会在生产环境构建时，为初始加载的关键资源（如JS和CSS文件）添加preload链接。fileBlacklist选项用于排除不需要预加载的文件，如source map和热更新文件。

手动配置HtmlWebpackPlugin

如果你需要更精细的控制，可以直接修改HtmlWebpackPlugin的配置，添加预加载链接。在config-overrides.js中找到HtmlWebpackPlugin的配置，并添加additionalAssets选项：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = function override(config, env) {
  if (env === 'production') {
    // 找到HtmlWebpackPlugin的配置
    const htmlPlugin = config.plugins.find(plugin => 
      plugin instanceof HtmlWebpackPlugin
    );
    
    if (htmlPlugin) {
      // 添加预加载资源
      htmlPlugin.options.additionalAssets = [
        { rel: 'preload', href: 'static/js/main.chunk.js', as: 'script' },
        { rel: 'preload', href: 'static/css/main.chunk.css', as: 'style' }
      ];
    }
  }
  return config;
};

配置资源预连接

预连接主要用于提前建立与第三方域名的连接，例如CDN、API服务等。我们可以通过修改HtmlWebpackPlugin的配置，添加preconnect链接：

module.exports = function override(config, env) {
  if (env === 'production') {
    const htmlPlugin = config.plugins.find(plugin => 
      plugin instanceof HtmlWebpackPlugin
    );
    
    if (htmlPlugin) {
      // 添加预连接资源
      htmlPlugin.options.meta = {
        ...htmlPlugin.options.meta,
        'preconnect': {
          'http-equiv': 'Link',
          'content': '<https://fonts.googleapis.com>; rel=preconnect, <https://api.yourdomain.com>; rel=preconnect'
        }
      };
    }
  }
  return config;
};

这段配置会在HTML的meta标签中添加preconnect指令，提前建立与Google字体和API域名的连接。

验证优化效果

构建项目并查看生成的HTML文件，确认preload和preconnect链接是否正确添加：

npm run build
cat build/index.html

在生成的HTML文件中，你应该能看到类似以下的链接标签：

<link rel="preload" href="static/js/main.chunk.js" as="script">
<link rel="preload" href="static/css/main.chunk.css" as="style">
<meta http-equiv="Link" content="<https://fonts.googleapis.com>; rel=preconnect, <https://api.yourdomain.com>; rel=preconnect">

你还可以使用Chrome浏览器的开发者工具（Performance面板）来测试优化效果，对比优化前后的页面加载时间。

总结与注意事项

通过react-app-rewired，我们可以轻松实现资源的预加载和预连接，而无需执行eject操作。需要注意的是：

1. 不要过度预加载资源，这可能会浪费用户的带宽并影响性能。
2. 预连接只适用于你确定会用到的第三方域名。
3. 始终在生产环境中测试优化效果，开发环境的构建结果可能不同。

更多关于react-app-rewired的配置技巧，可以参考官方文档和Webpack配置文件。通过合理使用预加载和预连接技术，你的React应用加载速度将得到显著提升，为用户提供更好的体验。

希望本文对你有所帮助！如果有任何问题或建议，欢迎在评论区留言。别忘了点赞、收藏本文，关注我们获取更多前端性能优化技巧。下期我们将介绍如何使用react-app-rewired实现代码分割和懒加载，敬请期待！

【免费下载链接】react-app-rewired Override create-react-app webpack configs without ejecting 项目地址: https://gitcode.com/gh_mirrors/re/react-app-rewired