vite-plugin-dns-prefetch插件开发

为什么要DNS预解析

我们知道当在浏览器输入URL首先要dns解析，而这个过程如果没有缓存可能要花费100ms的时间，因此我们可以让浏览器提前去异步加载解析dns。

DNS预解析插件

1.初始化项目
pnpm add vite typescript @mistjs/tsconfig-vue eslint @mistjs/eslint-config-vue tsup vitest @vitejs/plugin-vue vue vite-plugin-inspect -D
vite核心包，用于开发vite插件
@types/node：node的类型声明
typescript：ts类型声明
@mistjs/tsconfig-vue:ts配置文件
eslint:代码检查
@mistjs/eslint-config-vue：eslint配置文件
vite-plugin-inspect:插件调试
@vitejs/plugin-vue:vite的vue插件
tsup：基于rooup的构建工具，构建插件包
定义script脚本

tsup的配置

import { defineConfig } from 'tsup'

export default defineConfig({
  entry: [
    'src/main.ts', // 入口
  ],
  dts: true, // 生成dist
  clean: true,
  format: ['cjs', 'esm'],
})
tsconfig.json

{
    "extends": "@mistjs/tsconfig-vue",
    "compilerOptions": {
        "moduleResolution":"node",
        "isolatedModules":false
    }
}
eslintrc

{
    "extends": "@mistjs/eslint-config-vue"
}

插件功能

limit:限制最多添加多少个dns预解析，太多对网络也是负担，这里默认是10个
parseFile：解析哪些文件，数组类型，例如指定’.ts’|’.js’
excludeDnsPrefetchUrl:对于哪些url不采用预解析（一些大家可能经常访问的url本身就在缓存里了就没必要预解析了）
addDnsUrl：用户也可以直接添加一些URL进行预解析。

使用

pnpm install vite-plugin-dns-prefetch