[Vite] 性能优化
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: {
...
// 自动注入一个 模块预加载 polyfill
modulePreload: {
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 = 404
res.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,
},
],
},
}),
],
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2024-02-21 [Rust] Char vs String
2023-02-21 [Javascript Tips] Using Map over Object
2021-02-21 [Javascript] Intl.ListFormat
2020-02-21 [Javascript] Understanding the difference between .prototype and .__proto__ in JavaScript
2020-02-21 [Javascript] let doesn't hoist -- false
2020-02-21 [AST Babel Plugin] Hanlde ArrowFunction && FunctionExpression
2020-02-21 [AST Babel] Add function name into the console log 'path.findParent(t.isFunctionDeclaration)'