vite 生产环境的优化

打开vite.config.js文件

import viteCompression from 'vite-plugin-compression'
import { Plugin as importToCDN } from 'vite-plugin-cdn-import'



plugins.push(
  viteCompression({
    algorithm: 'gzip', //指定了压缩算gzip
    threshold: 10240, //指定文件大于1024（10kb）时才压缩文件
    verbose: false, //禁止在控制台输出结果
    deleteOriginFile: true //压缩完文删除源文件
  })
)

plugins.push(
  importToCDN({
    modules: [
      {
        name: 'vue',
        var: 'Vue',
        path: 'https://abcd-web.oss-cn-beijing.aliyuncs.com/vue.js'
      },
      {
        name: 'vue-router',
        var: 'VueRouter',
        path: 'https://abcd-web.oss-cn-beijing.aliyuncs.com/vue-router.js'
      },
      {
        name: 'axios',
        var: 'axios',
        path: 'https://abcd-web.oss-cn-beijing.aliyuncs.com/axios.js'
      },
      {
        name: 'element-plus',
        var: 'ElementPlus',
        path: 'https://abcd-web.oss-cn-beijing.aliyuncs.com/element-plus/2.4.0/index.js',
        css: 'https://abcd-web.oss-cn-beijing.aliyuncs.com/element-plus/2.4.0/index.css'
      },
      {
        name: '@element-plus/icons-vue',
        var: 'ElementPlusIconsVue',
        path: 'https://abcd-web.oss-cn-beijing.aliyuncs.com/eleIcon.js'
      },
      {
        name: 'dayjs',
        var: 'dayjs',
        path: 'https://abcd-web.oss-cn-beijing.aliyuncs.com/dayjs.js'
      },
      {
        name: 'vue-demi',
        var: 'VueDemi',
        path: 'https://abcd-web.oss-cn-beijing.aliyuncs.com/vueDemi.js'
      },
      {
        name: 'pinia',
        var: 'Pinia',
        path: 'https://abcd-web.oss-cn-beijing.aliyuncs.com/pinia.js'
      }
    ]
  })
)

可以根据自己的需要把比较大的库，全局引入的库,使用第三方的cdn托管起来，或者引用第三方的cdn

vite-plugin-compression插件开启gzip压缩,需要服务器端支持,可以参考前端部署的另一片文章,nginx部署