CRA生成的index.html相关知识

CRA生成的index.html相关知识

作为前端开发工程师,如果采用React开发前端工程,我们常常使用create-react-app创建项目架构。使用CRA打包得到的前端项目中包含index.html文件,本文对此文件中的一些细节做了剖析,总结index.html中不被注意的技术细节。

1. index.html中包含的script脚本的平稳退化

html 复制代码
<noscript>You need to enable javascript to run this app. </noscript>

在用户使用的浏览器不支持或者用户手动禁用了javascript脚本功能的时候,提示用户升级浏览器或者关闭对脚本的禁用。

2. 对样式引入的处理

在react的组件中通过类似import "./index.css"等方式引入样式文件的时候,通过webpack的打包处理,最终呈现在index.html中的是<head>容器标签中的一个<style></style>标签。通常来说这个新增的style标签位于head的最后。

3. index.html文件中是如何加载打包之后的bundle.js

html 复制代码
<script defer src="/static/js/bundle.js"></script>

可以看出来,webpack打包之后的bundle.js将会以defer 的方式放在一个script标签中进行加载,同样这个标签也是放在<head>标签的底部。

4. 如果在项目中使用了antd等组件库,那么组件库使用到的样式文件是以什么样的方式加载的

如果项目中使用了诸如antd之类的组件库,那么该组件库会将自己依赖的一些样式文件,以<style>标签的方式插入到index.html文件中的<head>标签中。不过需要注意的是,组件库的样式文件的优先级低于用户定制,所以这些自动插入的<style>标签的位置是<head>标签的顶部,这一点和用户自定义的样式文件的位置是不同的。

5. 如何在index.html文件中设置此网页的图标

使用<head>标签所包裹的link标签可以实现对网页图标的指定:

html 复制代码
<link rel="icon" href="/favico.ico">

需要注意的是link是一个单标签,而对于单标签而言,是没有结束标签的,并且可以使用/对标签进行封闭或者不进行封闭都是可以的。

如果是在移动端,那么可能用到的是:

html 复制代码
<link rel="apple-touch-icon" href="/logo192.png" />

6.manifest的作用

在index.html文档内容中还可以看到:

html 复制代码
<link rel="manifest" href="/manifest.json">

对于manifest文件的作用,直接参考官方的定义即可: manifest.json provides metadata used when your web app is installed on a user's mobile device sor desktop.

总结来说,就是提供应用的元信息的。

7. 如何设置文档的解析语言

文档通过html标签告诉浏览器自己使用的语言,比如说如果此文档的语言为英语:

html 复制代码
<html lang="en">

</html>

8. 关于index.html文件中的%PUBLIC_URL%

这个是占位符,其真实值会在webpack打包的时候由特定的插件处理。具体来说,webpack中处理这个占位符的插件为InterpolateHTMLPlugin和HTMLWebpackPlugin:

js 复制代码
plugins: [
    ...
    new InterpolateHTMLPlugin(HTMLWebpackPlugin, env.raw),
]

其中,env.raw的格式如下:

js 复制代码
{
    NODE_ENV: 'production',
    PUBLIC_URL: '.',
    FAST_REFRESH: true,
}

PUBLIC_URL的值实际上是由ppackage.json中的homepage; process.end.PUBLIC_URL; process.env.NODE_ENV三个部分共同决定的!

相关推荐
charlie11451419114 分钟前
HTML 理论系统笔记2
前端·笔记·学习·html·基础·1024程序员节·原生
2501_9387802818 分钟前
Ionic + Angular 跨端实战:用 Capacitor 实现相机拍照功能并适配移动端
前端·数码相机·angular.js
m0_64880493_江哥31 分钟前
Python实现随机选播视频的示例代码
前端·python·音视频
_大学牲32 分钟前
禁止复制内容 🤔 那点事~
前端·chrome·程序员
申阳36 分钟前
Day 1:耗时2小时,梳理并分享我作为全栈开发最依赖的“兵器库”
前端·后端·程序员
思考着亮36 分钟前
formData
javascript
UIUV1 小时前
CSS 高级动画学习笔记 —— 从 “亲吻小球” 案例看 CSS 核心技术
前端·css
星链引擎1 小时前
智能聊天机器人 技术架构核心实现与场景化落地
前端
yoyoma1 小时前
彻底搞懂 JavaScript 闭包:原理、陷阱与内存优化全解析
前端·javascript
茄汁面1 小时前
Angular(TypeScript ) 中基于 ExcelJS 实现导入模板下载功能(带样式与数据验证)
前端·javascript·node.js