Vite学习笔记----插件配置（不定时更新）

---

小tips：同类型插件很多不知道怎么选择可以参考npm下载量对比网站，笔者只罗列了自己使用的，大家根据不同喜好自己选择就行。

一. 打包代码分析

使用rollup-plugin-visualizer插件，不同于webpack的分析插件，不配置参数的情况下，这个插件默认生成的state.html会在根目录，而不是dist文件夹

import visualizer from 'rollup-plugin-visualizer'

……
plugins: [visualizer()]
……

二. 引入外部cdn

使用vite-plugin-cdn-import插件

import importToCDN from 'vite-plugin-cdn-import'
……
plugins: [
	importToCDN({
      modules:[
        {
          name:'vue',
          var:'Vue',
          path:'https://unpkg.com/vue@3.2.25/dist/vue.global.js'
        },
        {
          name: "axios",
          var: "axios",
          path:'https://cdn.jsdelivr.net/npm/axios@0.26.1/dist/axios.min.js'
        }
      ]
    })
]
……

打包也能看出来对比（橙色框是没有配置cdn之前的）：

三. 图片压缩

使用vite-plugin-imagemin插件

import viteImagemin from 'vite-plugin-imagemin'

// 图片压缩
viteImagemin({
  // 无损压缩配置，无损压缩下图片质量不会变差
  optipng: {
    optimizationLevel: 8
  },
  // svg 优化
  svgo: {
    plugins: [
      { name: 'removeViewBox' },
      { name: 'removeEmptyAttrs', active: false }
    ]
  }
})

注意官方有说，中国比较难安装这个插件，需要按照推荐方式：npm命令更改host指向，yarn命令配置package.json