建设公司网站入账,海宁高端高端网站设计,网站开发的步骤过程,怎样用记事本做网站前言
DNS解析过程消耗时间DNS有本地缓存
比如首次访问某站点#xff0c;会耗费很多时间进行DNS解析#xff0c;但解析结束后会将ip地址存入本地设备#xff0c;后续再访问此域名时就会直接从缓存中取。
首次访问页面时#xff0c;本页面的DNS解析是无法优化的#xff0…前言
DNS解析过程消耗时间DNS有本地缓存
比如首次访问某站点会耗费很多时间进行DNS解析但解析结束后会将ip地址存入本地设备后续再访问此域名时就会直接从缓存中取。
首次访问页面时本页面的DNS解析是无法优化的但是页面中可能用到其他域名下的资源如css、图片、js等可以通知浏览器提前对这些资源进行异步DNS解析。 实现
以下代码引入了其他域名下的资源需要在head中添加link进行dns预解析格式如下
link reldns-prefetch hrefhttps://www.xxx.com!DOCTYPE html
html langenheadlink reldns-prefetch hrefhttps://www.abc.comlink reldns-prefetch hrefhttps://www.aaa.comlink reldns-prefetch hrefhttps://www.tes.commeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.container {background: url(https://www.abc.com/imgs/main-bg);}/style
/headbodydiv classcontainerimg srchttps://www.aaa.com/img/32fd.jpg alt/divscript srchttps://www.tes.com/sss.js/script
/body/html框架内实现
但是合作开发模式下站外资源的引用会分散到很多组件中难以集中控制且由于是手动写死的地址也会提高维护成本。
本文提供两种方式分别为手写js实现以及vite插件如果想将js插件发布到npm可以看另一篇文章如何将自己的插件发布到npm上。
方式一手写js实现
标准的做法应该是根据构建工具写一个插件如vite用的rollup就要写一个rollup插件但是本文通过node实现。
首先需要实现分析打包结果中的js取出站外资源对应域名并动态添加link标签到html的head中。 新建js用于动态插入link 确保项目中有如下插件
npm install node-html-parser
npm install glob
npm install url-regexdns-prefetch.cjs代码内容如下
// 该node文件识别打包结果中的站外资源地址并动态插入index.html中link实现dns-prefetch提高渲染速度
// 调用方式node ./scripts/dns-prefetch.jsconst fs require(fs)
const path require(path)
const { parse } require(node-html-parser) // 可以脱离浏览器环境将html字符串解析成HTML节点
const { glob } require(glob)
const urlRegex require(url-regex) // 可以分析文件中所包含的url
const { strict } require(assert)const urlPattern /(https?:\/\/[^/]*)/i // 获取外部链接
const urls new Set() // url集合// 遍历dist目录中的所有 HTML 文件
async function searchDomain() {const files await glob(dist/**/*.{html,css,js})for (const file of files) {const source fs.readFileSync(file, utf-8)const matches source.match(urlRegex({ strict: true }))if (matches) {matches.forEach((url) {const match url.match(urlPattern)if (match match[1]) {urls.add(match[1]) // 将域名加到Set中}})}}
}// 将遍历好的所有域名生成link预解析标签并插入到index.html中
async function insertLinks() {const files await glob(dist/**/*.html)const links [...urls].map((url) link reldns-prefetch href${url}).join(\n)for (const file of files) {const html fs.readFileSync(file, utf-8)const root parse(html)const head root.querySelector(head)head.insertAdjacentHTML(afterbegin, links)fs.writeFileSync(file, root.toString(), utf-8)}
}async function main() {await searchDomain()await insertLinks()
}main()package.json中在打包处理后执行该js
scripts: {dev: vite,build: vite build node ./scripts/dns-prefetch.cjs,preview: vite preview
},的意义如 vitets 项目默认打包为build: tsc vite build意为先进行ts语法检查再打包如果语法检查错误则立即停止。所以此处将自定义js放到打包后执行。
查看dist中index.html发现link已经插入。 方式二vite-plugin-prefetch-dns插件
npm install vite-plugin-prefetch-dnsimport { defineConfig } from vite;
import prefetchDns from vite-plugin-prefetch-dns;export default defineConfig({plugins: [...其他插件prefetchDns()]
});执行npm run build打包完毕后看到正确插入link标签。
