React项目build后index.html中压缩脚本直接显示在网页上如何解决？

1. 为什么项目build后会生成该内嵌压缩脚本 #

你看到的这段内嵌脚本是webpack的运行时代码（webpack runtime），属于正常的构建产物：

• 基于webpack的React脚手架（比如create-react-app）默认会将负责模块加载、异步chunk调度、公共依赖管理的webpack runtime代码直接内联到index.html中，目的是减少额外的HTTP请求数，提升首屏加载速度。
• 这段代码是应用正常运行的必需依赖，所以直接删除会导致页面无法渲染。

2. 脚本直接显示在网页上的原因及永久解决方案 #

核心原因 #

这类情况绝大多数是你的项目public/index.html存在语法错误：比如存在未闭合的标签（link、meta、script等漏写>）、引号不配对，导致浏览器解析HTML结构时出错，将后续的script标签内容识别为普通文本渲染到页面上。你将脚本移到head中可临时解决，恰好是因为错误的语法出现在body标签内部靠前的位置。

永久解决方案 #

按优先级尝试以下操作：

• 第一步：排查修复public/index.html的语法错误
  逐行检查你项目根目录下public文件夹中的index.html文件，重点查看meta、link、自定义script标签是否有未闭合、引号不配对的问题，修复后重新build即可解决90%的同类问题。
• 第二步：修改构建配置（如果排查后确认HTML语法无问题）
  分两种场景处理：
  • 未eject的CRA项目：
    安装react-app-rewired和customize-cra，在项目根目录新建config-overrides.js，选择以下任意一种配置：
    方案1：关闭runtime内联，将runtime单独打包为外部js文件

    const { override, adjustWebpackConfig } = require('customize-cra');
    module.exports = override(
      adjustWebpackConfig(config => {
        config.optimization.runtimeChunk = 'single';
        // 移除内联runtime的插件
        config.plugins = config.plugins.filter(plugin => 
          plugin.constructor.name !== 'InlineChunkHtmlPlugin'
        );
        return config;
      })
    );
    

    方案2：保留内联，配置自动将所有script插入head标签

    const { override, adjustPluginOptions } = require('customize-cra');
    module.exports = override(
      adjustPluginOptions('HtmlWebpackPlugin', options => {
        options.inject = 'head';
        return options;
      })
    );
    

  • 已经eject的CRA项目：
    直接修改config/webpack.config.js：
    1. 要关闭内联就删除InlineChunkHtmlPlugin的相关配置项
    2. 要自动插入head就找到HtmlWebpackPlugin的配置，将inject属性的值改为'head'

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