- 关于HTTP： https://www.cnblogs.com/Answer1215/p/18729206
DNS
打包方式：
- 所有代码（包括 lodash-es、element-ui 等）被打包到一起，部署时只需请求一个或几个大文件。
- 优点是简单，不需要额外的网络请求；缺点是文件体积大，首次加载延迟较高，而且用户如果之前访问过其他站点加载了相同 CDN 版本的库，也无法复用缓存。
DNS 预解析与分域加载：
- 通过在 HTML 中加上
<link rel="dns-prefetch" href="//cdn.example.com">，浏览器提前解析域名，减少后续请求时的 DNS 解析时间。 - 把第三方库放在 CDN 上，用户可能已因其他站点访问而缓存了这些库；同时浏览器可以对不同域名并行建立连接，从而加快加载速度。
- 优点是减小主 bundle 体积、降低首屏加载延时、利用缓存和并发下载；缺点则是需要管理多个源，并考虑版本控制和 CDN 可靠性。
Vite中的配置
// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => { ...return {plugins: [vue(),ElementPlus({ format: 'esm' }),],resolve: {alias: {"@": resolve(__dirname, "src"),// 注意，别名处理这里只能是ESM模块，CJS模块无法处理"lodash-es":"https://cdn.jsdelivr.net/npm/lodash-es@4.17.21/+esm"}},build: {... // 自动注入一个 模块预加载 polyfillmodulePreload: {polyfill: true},rollupOptions: {external:['vue','vue-router','element-plus','vue-echarts','echarts','@vueuse/core'],plugins: [externalGlobals({"vue": "Vue","vue-router": "VueRouter","element-plus": 'ElementPlus',"@vueuse/core": "VueUse","echarts": "echarts","vue-echarts": "VueECharts",})],}}}
})
Tree shacking
推荐
使用ESM模块化的库，比如lodash-es
🙅
使用lodash
推荐
import {debounce} from "lodash-es"
🙅
import lodash from 'lodash-es'
代码压缩
构建分析
https://github.com/btd/rollup-plugin-visualizer
gzip压缩
https://nginx.org/en/docs/http/ngx_http_gzip_module.html
https://github.com/nonzzz/vite-plugin-compression
https://nginx.org/en/docs/http/ngx_http_gzip_static_module.html
后端代码示例
const http = require('http')
const path = require('path')
const fs = require('fs')
// 提供静态文件服务
const sirv = require('sirv')const defaultWD = process.cwd()const publicPath = path.join(defaultWD, 'dist')const assets = sirv(publicPath, { gzip: true, brotli: true })function createServer() {const server = http.createServer()server.on('request', (req, res) => {assets(req, res, () => {res.statusCode = 404res.end('File not found')})})server.listen(8080, () => {const { port } = server.address()console.log(`server run on http://localhost:${port}`)})
}function main() {if (!fs.existsSync(publicPath)) throw new Error('Please check your\'re already run \'npm run build\'')createServer()
}main()
图片压缩
pnpm add vite-plugin-imagemin -D
import viteImagemin from 'vite-plugin-imagemin'export default () => {return {plugins: [viteImagemin({gifsicle: {optimizationLevel: 7,interlaced: false,},optipng: {optimizationLevel: 7,},mozjpeg: {quality: 20,},pngquant: {quality: [0.8, 0.9],speed: 4,},svgo: {plugins: [{name: 'removeViewBox',},{name: 'removeEmptyAttrs',active: false,},],},}),],}
}
