一、我为什么选择vite？（技术选型）
vite分为两个核心阶段：
1.开发环境编译 ESbuild
2.生产环境打包 Rollup
Esbuild是Go实现的，更贴近底层，性能会更好，AST的复用，并发、多线程，利用了原生的es6 module，是真正的按需加载。但是webpack需要分析项目的整个依赖。
那为什么打包用Rollup呢?
esbuild专注解决的是 ts js的编译，还有很多其他资源 css、图片、路径等等，各种插件。借用了rollup的能力。 使用esbuild+rollup 扬长避短，携手并进。
配置比webpack相对要简单，上手更快，而且性能不错，不用主动去做很多优化，他能保证一个性能的底线
二、打包UMD模块
commonjs规范。nodejs包管理规范。Require exports
AMD
CMD
前端模块化的方案。
你的项目用的什么模块化方案?
es6 module
commonjs
你的项目打包出来的文件遭循什么规范?
UMD的规范
通用性非常强，一套规范，几乎所有的项目都可以引用。
cdn链接
if(xxxx){
AMD //
}else if{
cmd //
}
三、Vite在开发环境不进行类型检查
巨大的性能提升。
esbuild是按需引用.
ts的类型检查要分析全局的依赖。
两者冲突的。
借助编辑器的TS类型检查，和vite互不冲突。
四、css编译性能优化
yy一个场景:我们css编译我发现很慢，于是我提升了它的性能。
// vite.config.js
import { defineConfig } from 'vite';
import lightningcss from 'vite-plugin-lightningcss';
export default defineConfig({
plugins: [
lightningcss({
// 这里可以添加LightningCss的配置选项
// 例如：
minify: true,
preset: 'lightning' // 注意：这里应该是字符串 'lightning'，而不是变量 Lightning
// 其他配置选项可以在这里添加
})
]
});
五、项目别名配置
../../../
../
Webpack
Vite
通用
// 导入必要的模块
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import postcssPresetEnv from 'postcss-preset-env';
import path from 'path';
// Vite配置文件
export default defineConfig({
plugins: [
vue() // 使用Vue插件
],
css: {
postcss: {
plugins: [
postcssPresetEnv() // 使用PostCSS预设环境插件
]
}
},
resolve: {
alias: {
'@assets': path.resolve(__dirname, './src/assets/') // 设置别名
}
}
});
六、预构建优化性能解决流量瀑布问题
vite有一个非常经典的问题。
按需加载。
引入了一个js，js引入好多其他js
index.js
import xxx from "lodash"
import xxx from "dayjs"
项目初始化，加载上千个js,可能会导致，开发环境，会加载上千个js，很慢。
预构建解决两个问题:
1.分析依赖，将这些多个依赖合并打包在一起加载。
2.有些第三方库比较老，不支持es6 module。
七、使用预构建，优化lodash-es开发环境加加载性能并且利用缓存
optimizeDeps:{
exclude:['lodash-es']
}
非常典型的lodash-es包引发的问题
开启预构建
预构建的缓存
