/resource-hint-generator

NPM package for generating prefetch, preload and other HTML resource hint

Primary LanguageJavaScript

resource-hint-generator PRs Welcome

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

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

Downloads Hint File Size Version LastCommit CIStatus

特性

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

演示：

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

fe295039-983b-45a6-91b3-67d9131a8316

用法

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