切换构建工具webpack与vite对比

首先，你需要安装 Vite 和相关依赖。打开终端，在项目根目录下运行以下命令：Bash拷贝npm install vite @vitejs/plugin-react ### 2. 创建 Vite 配置文件在项目根目录下创建一个名为 vite.config.js 的文件，并添加以下基本配置：JavaScript拷贝import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], }); ### 3. 修改 package.json 脚本在 package.json 中，替换或添加 Vite 的开发和构建命令：JSON拷贝scripts: { dev: vite, build: vite build, serve: vite preview } ### 4. 更新项目结构如果你的项目中使用了 Webpack 特有的结构（例如，webpack.config.js），可以将其删除并重组文件夹结构，确保符合 Vite 的要求。Vite 通常要求将源代码放在 src 文件夹中。 ### 5. 处理 CSS 和其他资源 Vite 对 CSS 的处理相对简单。确保在组件中直接引入 CSS 文件，Vite 会自动处理。如果你的项目使用了 CSS 预处理器（如 SASS 或 LESS），需要安装相应的依赖并更新配置。例如，对于 SASS：Bash拷贝npm install sass

6. 处理静态资源将静态资源（如图片和字体）放在 public 目录下，Vite 会自动处理这些文件。你可以直接通过相对路径引用这些文件。这个在webpack中一致的。如果你在你之前的项目中不是这样引用的需要进行切换 9. 移除 Webpack 相关依赖在确认项目正常运行后，可以逐步移除与 Webpack 相关的依赖，如 webpack、webpack-cli 和其他 Webpack 插件。

### 10. 测试和调试最后，使用 npm run dev 启动开发服务器，检查项目是否正常运行，确保所有功能都按预期工作。如果出现问题，查看控制台错误信息，逐步排查。

拓展使用分析打包结果

常见的我们有的时候会需要分析打包完成后的项目中哪些部分大小过大之类的问题，可以使用 rollup-plugin-visualizer 来获取一个可视化的结果

他会生成一个html并自动打开，内容大致如下，可以看到源码及各个modules中的哪些大小比较大。

1 构建工具历史，为什么需要webpack

SAKURAAE