1.treeShaking

树摇优化 自动开启

必须是esm就能支持

require : commonjs 运行时确定依赖关系

import : esm 编译时确定依赖关系

如图 只会打包x 不会打包y

如果x和y都使用 就会打包x和y

2.import()代码分包

import动态导入

打包后 多了个js

可以减少主包大小

3.rollup-plugin-visualizer打包分析

4.vite-plugin-compression压缩

减小文件体积(核心优势)

配合服务器使用

打包的时候直接输出gz、br 文件主要是为了降低服务器 CPU 使用率。nginx 可以配置当本地存在文件的时候直接加载压缩文件，不需要 nginx 进行压缩处理。

和terser代码压缩的区别

5.esbuild:drop:[‘console’,’debugger’] 删除console和debugger

6.手动分包

7.依赖预构建

8.图片资源优化(Image Optimization)

9.CDN加速

10.预加载(Preload)