小tips:同类型插件很多不知道怎么选择可以参考npm下载量对比网站,笔者只罗列了自己使用的,大家根据不同喜好自己选择就行。
一. 打包代码分析
使用rollup-plugin-visualizer插件,不同于webpack的分析插件,不配置参数的情况下,这个插件默认生成的state.html会在根目录,而不是dist文件夹
import visualizer from 'rollup-plugin-visualizer'
……
plugins: [visualizer()]
……
二. 引入外部cdn
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之前的):
三. 图片压缩
import viteImagemin from 'vite-plugin-imagemin'
// 图片压缩
viteImagemin({
// 无损压缩配置,无损压缩下图片质量不会变差
optipng: {
optimizationLevel: 8
},
// svg 优化
svgo: {
plugins: [
{ name: 'removeViewBox' },
{ name: 'removeEmptyAttrs', active: false }
]
}
})
注意官方有说,中国比较难安装这个插件,需要按照推荐方式:npm命令更改host指向,yarn命令配置package.json