[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,
            },
          ],
        },
      }),
    ],
  }
}

 

posted @   Zhentiw  阅读(5)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做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)'
点击右上角即可分享
微信分享提示