function parseQueryString(url) { const queryString = url.split('?')[1]; if (!queryString) return {}; return queryString.split('&').reduce((acc, curr) => { const [key, value] = curr.split('='); acc[decodeURIComponent(key)] = decodeURIComponent(value); return acc; }, {}); }
在 Vite 配置文件中，可以通过配置 esbuild 来移除生产环境下的所有 console 打印。 // vite.config.js import { defineConfig } from 'vite' import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueDevTools from 'vite-plugin-vue-devtools' // https://vite.dev/config/ export default defineConfig(({ mode }) => { return { plugins: [vue(), vueDevTools()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), }, }, esbuild: { drop: mode === 'production' ? ['console'] : [], // 在生产环境下移除 console 打印 }, } }) 参考 How to remove console.log ,when vite build use esbuild?
首先我们要确定可以从什么方向对体验进行优化 影响网页体验有很多方面，不过一般方向无非下面这三大类 网络 JS执行 页面渲染 关于网络优化 关于网络优化，我们要先了解发起网络请求的流程 查询对应的域名 加入请求队列 发起连接 发送请求 等待响应 下载内容 其中 4, 5, 6 步都是受客户端到服务器之间的网络影响，前端几乎没什么能优化的所以着重说下剩下的几个方面如何优化 DNS (影响小) 首先什么是 DNS 可以参考 Wikipedia 域名系统 这部分优化说白了就是让浏览器在拿到地址时就直接把对应的 IP 解析出来，不要在真正发起请求的时候再解析。 <link rel="dns-prefetch" href="https://fonts.googleapis.com/" /> 参考 MDN 文档 请求队列 浏览器对于单个域名只能同时建立4~6个TCP连接（不同浏览器实现有差异）。 如果在 http/1.1 的情况下比如说我现在有六个大体积的图片正在加载，剩下一个影响布局的 JS 请求只能等待前面的任意一个请求完成才能发起，很明显这会增加布局完成的时间降低用户体验，但是在 HTTP/2 中则不存在这个问题，优化方面有下面这几个 使用 HTTP/2 这个需要服务端启用 HTTP/2 协议，浏览器会自动与服务端协商。如果服务端支持 HTTP/2，浏览器会优先使用这个协议。否则会回退到 HTTP/1.1。 域名分片 把原来耗时的请求例如图片、字体等放到另一个域名中。这是最常见的做法 例如谷歌就把字体等图片放到不同的域名中 将耗时的请求延后 确定哪些请求比较重要，先加载会影响页面布局的资源。 例如下面的 JS 标签 defer 属性可以让浏览器在 HTML 解析完成后再执行脚本，这样就不会阻塞页面渲染。但是注意，这个属性对模块脚本无效。 <script src="https://example.com/script.js" defer></script> 对于图片和 iframe 可以使用 loading="lazy" 属性来延迟加载，只有当进入视口时才会加载。 <img src="image.jpg" loading="lazy" alt="Lazy loaded image"> 发起连接 思路同样是预连接 ...