resource-hint-generator

resource-hint-generator

prefetch, preconnect和dns-prefetch等资源优先级提示自动化生成工具。

配套讲解文章《1.4秒到0.4秒-2行代码让JS加载耗时减少67%》：https://juejin.cn/post/7274889579076108348

特性

1. 自动遍历构建产物，生成注入脚本，运行后注入prefetch资源优先级提示link标签
2. 指定域名，生成注入脚本，运行后注入preconnect和dns-prefetch资源优先级提示link标签

演示：

在线运行DEMO：https://stackblitz.com/edit/github-ckfcpg?file=README.md,dist%2Fresource-hint.js

用法

0. 安装

npm install resource-hint-generator --save-dev

1. 配置

module.exports = {
  distPath: `./dist`,
  includeFileTestFunc: (fileName) => {
    return /(a.*js)|(b.*css)|(first.*js)/g.test(fileName);
  },
  publicPath: 'https://config.com/static/', 
  preconnectDomains: ['https://config.com'],
};

2. 运行

1. 在package.json中新增运行命令generate-resource-hint

2. 并追加运行命令到构建命令（build）后

例如：

// package.json
"scripts": {
    "generate-resource-hint": "resource-hint-generator",
    "build": "cross-env NODE_ENV=production webpack && npm run generate-resource-hint",
}

选项

配置项	简介	类型	默认值
distPath	打包产物路径，也是生成的resource-hint.js输出路径	String	'./dist'
includeFileTestFunc	指定一个函数，返回布尔值表示，遍历distPath找到的的fileName，是否会被作为<link rel="prefetch">的href属性值	Function	(fileName: string) => false
includeFileNames	指定一个数组，数组中的字符串元素，会被作为<link rel="prefetch">的href属性值	String[]	[]
projectRootPath	项目根目录路径	String	''
resourceHintFileName	生成的注入脚本名称	String	'resource-hint.js'
crossOriginValue	<link>标签crossorigin的属性值，默认值undefined表示无crossorigin属性	String | undefined	undefined
publicPath	用于和includeFileTestFunc、includeFileNames匹配到的文件名，拼接出<link rel="prefetch">标签的href属性值	String	''
preconnectDomains	指定一个数组，数组中的每个字符串元素，都将产生2个href属性值为当前字符串的<link rel="preconnect">标签和<link rel="dns-prefetch">标签	String[]	[]
configFileName	本地配置文件名称	String	'resource-hint-generator-config.js'

欢迎 Issue && PR