Coder Social home page Coder Social logo

resource-hint-generator's Introduction

resource-hint-generator PRs Welcome

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

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

Downloads Hint File Size Version LastCommit CIStatus

特性

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

演示:

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 用于和includeFileTestFuncincludeFileNames匹配到的文件名,拼接出<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

resource-hint-generator's People

Contributors

juniortour avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.