prefetch, preload, dns-prefetch,preconnect ,defer和async整理

dns-prefetch( DNS – Domain Name System,域名系统) DNS 预解析

<link rel="dns-prefetch" href="//cdn.staticfile.org" />

浏览器访问一个链接时,并不是直接将请求到网页对应的服务器上,而是先要访问域名服务器做域名解析,此时就会出现网路开销,一般要要几十毫秒到几百毫秒之间。

dns-prefetch指令可以在尚未访问 url 的时候提前做 dns 解析缓存(和其他页面加载并行执行),从而在真正请求 url 的时候避免对 dns 服务器的解析,达到加速网页加载的目的。

在 Chrome 中默认已经开启对静态资源的 dns 预解析,所有的a标签的href都会自动去启用DNS Prefetching,也就是说,网页的a标签href带的域名,是不需要在head里面加上link手动设置的,但是标签的默认启动在HTTPS不起作用,需要设置<meta http-equiv="x-dns-prefetch-control" content="on">开启.

preconnect

<link rel="preconnect" href="https://example.com">

MDN <link> 元素的 rel 属性的 preconnect 关键字是对浏览器的一种提示,即用户很可能需要来自目标来源的资源,因此浏览器很可能通过抢先启动与该源的连接来改善用户体验。通过抢先执行部分或全部握手(HTTP 为 DNS+TCP,HTTPS 为 DNS+TCP+TLS),预连接可加快未来从给定源加载的速度

Preload Prefetch
preload和prefecth是link标签上的属性,在常用用法里无法加载js,只能加载css,但是如果使用prefetch和preload,就可以加载js。preload或prefetch存储其实是在disk cache,也就是硬盘缓存。

import vuetify, { transformAssetUrls } from "vite-plugin-vuetify"; import versionUpdatePlugin from "./plugins/versionUpdatePlugin"; import viteCompression from "vite-plugin-compression"; import cssnano from "cssnano"; // PWA Config const shortTitle = "Xescort.net"; const description = "The best incall & outcall independent escort, 100% real escort and real-name verification, the best dating experience, regardless of gender, age, region or other more requirements can be met."; const themeColor = "#4f46e5"; // https://v3.nuxtjs.org/api/configuration/nuxt.config export default defineNuxtConfig({ modules: [ "@nuxtjs/tailwindcss", "@vite-pwa/nuxt", "@pinia/nuxt", "@pinia-plugin-persistedstate/nuxt", "@nuxt/image", "nuxt-vitalizer", async (options, nuxt) => { nuxt.hooks.hook("vite:extendConfig", (config) => { config.plugins ||= []; config.plugins.push(vuetify()); }); }, ], postcss: { plugins: { "@fullhuman/postcss-purgecss": { content: ["./pages/**/*.vue", "./components/**/*.vue", "./layouts/**/*.vue", "./app.vue"], safelist: [ /^v-/, // 保留所有 Vuetify 类名 /^mdi-/, /--text$/, /--bg$/, /^theme--/, ], }, }, }, image: { formats: ["webp", "avif"], screens: { xs: 320, sm: 640, md: 768 }, presets: { cover: { modifiers: { fit: "cover", format: "webp" } }, }, // domains: ["https://assets.xescort.net"], }, build: { analyze: { analyzerMode: "static", }, transpile: ["vuetify", "@fancyapps/ui", "@nuxt/image"], }, ssr: true, // import styles experimental: { externalVue: false, }, css: [ "vue-snap/dist/vue-snap.css", "@/assets/main.scss", "@/assets/icons/iconfont.css", "@/assets/icons/bootstrap-icons.css", ], devtools: { enabled: true }, routeRules: { "/**": { appMiddleware: ["cache"], }, }, // enable takeover mode typescript: { shim: false }, nitro: { compressPublicAssets: true, prerender: { // crawlLinks: true, // 自动爬取页面链接 routes: [], // 入口页面 ignore: ["/_ipx/**"] /* dynamic routes */, }, routeRules: { "/**": { // cache: false, // headers: { // "Cache-Control": "no-cache, no-store, must-revalidate", // }, }, "/api/**": { cache: { swr: true, maxAge: 60, }, }, // 60秒后重新验证 "/": { prerender: false, // 预渲染首页 isr: 3600, // swr: 60, headers: { "Cache-Control": "public, max-age=3600, s-maxage=3600", // 缓存1小时 }, }, "/categories/[type]/[args]": { prerender: false, // 预渲染分类页面 isr: 3600, swr: 600, headers: { "Cache-Control": "public, max-age=3600, s-maxage=3600", // 缓存1小时 }, }, "/search": { prerender: false, // 预渲染搜索页面 isr: 3600, swr: 600, headers: { "Cache-Control": "public, max-age=3600, s-maxage=3600", // 缓存1小时 }, }, "/details/[tag]/[identity]": { prerender: false, isr: 3600, swr: 600, headers: { "Cache-Control": "public, max-age=3600, s-maxage=3600", // 缓存1小时 }, }, "/escorts/[country]": { prerender: false, // 预渲染所有 escort 页面 isr: 3600, swr: 600, headers: { "Cache-Control": "public, max-age=3600, s-maxage=3600", // 缓存1小时 }, }, "/escorts/[country]/[state]": { prerender: false, // 预渲染所有 escort 页面 isr: 3600, swr: 600, headers: { "Cache-Control": "public, max-age=3600, s-maxage=3600", // 缓存1小时 }, }, "/escorts/[country]/[state]/[city]": { prerender: false, // 预渲染所有 escort 页面 isr: 3600, swr: 600, headers: { "Cache-Control": "public, max-age=3600, s-maxage=3600", // 缓存1小时 }, }, }, }, // Based on docs found here - https://vuetifyjs.com/en/getting-started/installation/#using-nuxt-3 vite: { css: { preprocessorOptions: { scss: { api: "modern-compiler", }, }, // postcss: { // plugins: [ // cssnano({ // preset: ["default", { discardComments: { removeAll: true } }], // }), // ], // }, }, optimizeDeps: { include: ["vuetify", "@fancyapps/ui"], }, build: { modulePreload: false, sourcemap: false, emptyOutDir: true, // 强制清空输出目录 rollupOptions: { output: { format: "es", manualChunks: (id) => { if (id.includes(".scss")) { return "style"; } if (id.includes("node_modules")) { return "vendor"; } }, }, }, }, plugins: [ viteCompression({ algorithm: "gzip", ext: ".gz", threshold: 2048, // Only compress files larger than 10KB }), versionUpdatePlugin(), vuetify({ autoImport: true, }), ], vue: { template: { transformAssetUrls, }, }, // server: { // // host: "0.0.0.0", // Removed as it is not allowed in the current type // proxy: { // "/api": { // target: "https://www.xkwsb.top", // changeOrigin: true, // // rewrite: (path) => path.replace(/^\/api/, ""), // }, // }, // }, define: { "process.env.DEBUG": false, }, }, // devServer: { // https: { // cert: "./certs/cert.pem", // key: "./certs/dev.pem", // }, // }, runtimeConfig: { isServer: true, baseUrl: process.env.NUXT_BASE_URL, port: process.env.PORT || "8000", public: { wsUrl: process.env.NUXT_WS_URL, chatWs: process.env.NUXT_CHAT_WS, chatApi: process.env.NUXT_CHAT_API, port: process.env.PORT || "8000", baseUrl: process.env.NUXT_BASE_URL, gClient: process.env.GOOGLE_CLIENT_ID, }, }, vitalizer: { delayHydration: { hydrateOnEvents: ["click", "touchstart"], idleCallbackTimeout: 2000, postIdleTimeout: 1000, }, disablePrefetchLinks: "dynamicImports", disablePreloadLinks: true, disableStylesheets: "entry", }, app: { head: { htmlAttrs: { lang: "en", }, meta: [ { name: "theme-color", content: themeColor }, { name: "mobile-web-app-capable", content: "yes" }, { name: "rating", content: "adult" }, { name: "robots", content: "noarchive" }, { name: "referrer", content: "no-referrer" }, ], link: [ { rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css", }, { rel: "icon", type: "image/x-icon", href: "/icons/favicon.ico" }, { rel: "apple-touch-icon", href: "/icons/apple-touch-icon.png" }, { rel: "alternate", href: "https://www.xescort.net", hreflang: "x-default" }, { rel: "preconnect", href: "https://api.iconify.design" }, { rel: "preconnect", href: "https://assets.xescort.net" }, { rel: "dns-prefetch", href: "https://api.iconify.design" }, ], // // DNS 预解析 Vue 官方 CDN // { rel: "dns-prefetch", href: "https://unpkg.com" }, // // 预解析常用 CDN(按需添加) // { rel: "dns-prefetch", href: "https://cdn.jsdelivr.net" }, // { rel: "dns-prefetch", href: "https://fonts.googleapis.com" }, // // 推荐同时配置 TCP 预连接 // { rel: "preconnect", href: "https://unpkg.com", crossorigin: "anonymous" }, script: [ // { // src: "https://unpkg.com/vue@3/dist/vue.global.prod.js", // defer: true, // 异步加载 // tagPosition: "bodyClose", // }, // { // src: "https://www.googletagmanager.com/gtag/js?id=G-5VCS4RBFF2", // tagPosition: "bodyClose", // tagPriority: "low", // }, // { // type: "text/javascript", // innerHTML: // "window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-5VCS4RBFF2');", // tagPosition: "bodyClose", // tagPriority: "low", // }, ], }, }, pwa: { includeAssets: ["favicon.ico", "*.txt"], manifest: { name: shortTitle, short_name: shortTitle, description: description, theme_color: themeColor, lang: "en", background_color: "#ffffff", icons: [ { src: "/icons/pwa-192x192.png", sizes: "192x192", type: "image/png", purpose: "any", }, { src: "/icons/pwa-512x512.png", sizes: "512x512", type: "image/png", purpose: "any", }, { src: "/icons/pwa-maskable-192x192.png", sizes: "192x192", type: "image/png", purpose: "maskable", }, { src: "/icons/pwa-maskable-512x512.png", sizes: "512x512", type: "image/png", purpose: "maskable", }, ], }, workbox: { globPatterns: ["**/*.{js,css,html,png,webp,gif,jpg,jpeg,svg,ico}"], globIgnores: ["**/icons/iconfont.css", "**/icons/bootstrap-icons.css"], runtimeCaching: [ { urlPattern: ({ request }) => request.destination === "image", handler: "CacheFirst", options: { cacheName: "images", expiration: { maxEntries: 50, maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days }, }, }, { urlPattern: ({ request }) => request.destination === "script" || request.destination === "style", handler: "StaleWhileRevalidate", options: { cacheName: "scripts-styles", expiration: { maxEntries: 20, maxAgeSeconds: 1 * 24 * 60 * 60, // 1 days }, }, }, ], }, }, compatibilityDate: "2025-08-12", }); 帮我分析下这个nuxt3的配置文件 修改哪些地方可以优化项目
最新发布
08-20
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值