
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
vite build
Vite默认提供了通用的优化能力,若使用vite build命令,则默认将内容构建到dist目录下,如图1-8所示。

图1-8 Vite生产模式
可以看到,在build模式下文件的体积已经小了很多。由于build模式是将文件构建输出到文件目录,因此需要使用一个额外的工具npx static-server -z来托管这些文件,才能看到结果。

这样就可以打开http://localhost:9080,同样,打开DevTools能看到页面的性能,如图1-9所示。
可以看到,原来的18.4s已经被优化到2.51s,其中最显著的优化是因为Vite将JavaScript代码打包到一起并且压缩到只有129KB,如图1-10所示。
关于打包和代码压缩带来的优化请参考第17章。

图1-9 Vite生产模式下页面的性能

图1-10 代码压缩