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