作为前端开发者如何针对DNS做优化？众所周知，这个DNS是做域名解析的，输入一个域名，经过DNS解析之后就可以得到一个IP地址，互联网中做请求都要把域名转成IP，这个转换过程是比较复杂的，就比较耗时，所以说有优化的空间，它转换之后是会做本地缓存。所以我们优化的目标主要是针对用户第一次访问站点的时候陷入长时间白屏的问题。由于工程化开发涉及到大量页面，页面中可能存在一些站外地址资源（例如js，css，图片等），当浏览器解析HTML时遇到这些域名，就会暂停HTML解析转而去DNS解析，这个过程就会造成阻塞浏览器渲染主线程！
如何优化？
框架中如何实现提前预解析DNS
这里分享一个通用的方法：项目下创建script目录，下在创建dns-prefetch.js
const fs = require('fs');
const { parse } = require('node-html-parser');
const { glob } = require('glob');
const urlRegex = require('url-regex');
//获取外部链接的正则表达式
const urlPattern = /(https?:\/\/[^/]*)/i;
const urls = new Set();
// 遍历dist目录中的所有HTML、js、css文件
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]);
}
});
}
}
}
async function insertLinks() {
const files = await glob('dist/**/*.html');
const links = [...urls].map((url) => `<link rel="dns-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());
}
}
async function main() {
await searchDomain();
// 在<head>标签中添加预取链接
await insertLinks();
}
main();注意事项！
这几个引用最好npm install一下，不然可能出错
打包时顺便执行下这个函数
效果
最后在dist打包结果中可以看到index.html文件中多了一些