项目性能优化明细

对一些自己项目中常用的性能优化的方法做一个简单的记录

1. 使用 lodash-es 代替 lodash

import { isFunction } from "lodash-es"

2.对字体文件进行分包加载

对于一些大屏项目，经常需要引入第三方字体，而中文字体经常超过10M，所有经常加载上会出现明显的延迟。对于字体的处理，一般有几种方法：

• 压缩字体大小，将ttf、otf格式转化为woff、woff2格式
• 对自己文字进行分包，使用并发加载(使用cn-font-split)。

3.ViteConfig

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import { visualizer } from 'rollup-plugin-visualizer'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import stylelintPlugin from 'vite-plugin-stylelint'
import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig({
  base: './',
  esbuild: {
    pure: ['console.log'],
    drop: ['debugger'],
  },
  build: {
    sourcemap: false,
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id
              .toString()
              .split('node_modules/')[1]
              .split('/')[0]
              .toString()
          }
        },
      },
    },
  },
  plugins: [
    vue(),
    vueJsx(),
    stylelintPlugin({ fix: true }),
    stylelintPlugin({ fix: true }),
    visualizer({ open: true }),
    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,
          },
        ],
      },
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler',
      },
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  server: {
    host: '0.0.0.0',
    port: 1124,
    open: true,
  },
})

//package.json

{
  //...
  "resolutions": {
    "bin-wrapper": "npm:bin-wrapper-china"
  }
}