公司项目是用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的生态还在不断完善，我感觉已经是可以投入生产了。