公司项目是用vue的,关于vue的脚手架有两个,vue-cli和vite。那么要探讨vite能不能投入生产,就要看vite在开发和打包后的效果能不能和vue-cli相比较。
开发环境
启动速度
首先是启动速度,vite引以为傲的就是开发环境中不打包。那么相对于vue-cli在开发环境中打包,这个速度肯定是完爆的。
打包配置
基础配置项可以看一下杨村长的文章:
文章一:备战2021:vite工程化实践,建议收藏
文章二:备战2021:Vite2项目最佳实践
稍微提一下别名的配置,现在改成这样了:
import { resolve } from 'path'
export default defineConfig({
resolve:{
alias:{
src: resolve(__dirname, 'src')
}
}
})
复制代码
打包上线
一路开发下来还是挺爽的,特别是更新速度,相比以前vue-cli每次更改文件就要重新加载20多秒,vite的体验确实非常的好。
然后打包就遇到很多坑了。。。
打包速度的问题
vite在打包中会计算包的大小,但是只是计算不做处理,会长打包时间,所以可以在build中再添加一个配置项关闭打包计算。
brotliSize: false
复制代码
图片资源路径的引用问题
但是又发现另一个问题,我的图片路径是存在字符串里面的,vue打包后还是原封不动的渲染成字符串,这就和刚才配置的img路径不符了,图片引不进来。
一个一个import又极其繁琐。
图片的问题已解决:点击→ 解决vite使用alias引入图片不显示的问题
Tree shaking的问题
我发现vite采用了Tree shaking的方法,即 用不到的资源不打包。那么是不是意味着在导入其他组件库的时候,比如Element UI,不用再按需导入了呢?
然而测试之后发现,关于UI组件库这块,没有使用Tree shaking,导入什么就打包什么。并且在这块有个小问题,使用解构赋值的方式按需加载,还是变成全部导入。要按需导入,可参考我的另一篇文章配置:juejin.cn/post/699213…
gzip压缩
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins:[
...,
viteCompression({
//生成压缩包gz
verbose: true,
disable: false,
threshold: 10240,
algorithm: 'gzip',
ext: '.gz',
}),
]
})
复制代码
我把打包后的项目用express稍微搭了个后台跑了一下,发现express开启了gzip和没开启gzip,都是一样的。不知道vite是不是默认启动gzip压缩?有了解的小伙伴也可以说一下。
vite-plugins插件
关于vite的其他插件,可以参考这里:Vite 2.0 配置总结
整体配置
最后再放一下我的vite的配置把,供大家参考:vite配置
体验总结
至此,vite的项目就完美上线了。
从开发体验上来说,vite是要优于vue-cli的。并且加入了一些配置项后,打包后的效果可以和vue-cli相比了。目前vite的生态还在不断完善,我感觉已经是可以投入生产了。