如何详细解析webpack项目结合vite实现兼容模式的加速优化？

本文共计2229个文字，预计阅读时间需要9分钟。

目录+前言+目的+要处理的问题+动手+共用+index.+共用配置+兼容环境变量+自动导入+资源引入+svg-sprite-loader+替代方案+其他+效果+前言+随着公司前端工程的日益庞大，启动是无限的等待，优化是永恒的追求。

目录

• 前言
• 目的
• 要处理的问题
• 动手
• 共用 index.html
• 共用配置
• 兼容环境变量
• 自动导入
• 资源引入
• svg-sprite-loader 替代方案
• 其他
• 效果

前言

随着公司前端工程越来越大，启动是无尽的等待，修改是焦急的等待。

vite 到现在生态也起来了，就有了把项目改造成 vite 的想法，但是项目后面可能要依赖 qiankun 改造成微前端项目，现在 qiankun 对 vite 还没有好的解决方法，我就想采取一个折中的办法，保留 webpack，再兼容 vite，两条路都留着。

目的

• 可以用 vite 跑开发环境。
• 可以用 webpack 跑开发环境。
• 暂时用 webpack 打包，等后面有解决方案再全面转 vite。