2021年了,vite能投入生产了吗?vite.config.js配置踩坑

35,881 阅读3分钟

公司项目是用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路径不符了,图片引不进来。

image.png

image.png

一个一个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的生态还在不断完善,我感觉已经是可以投入生产了。