webpack4升级到webpack5
💡
原文中文，约7900字，阅读约需19分钟。
📝
内容提要
AI云平台前端项目启动和编译缓慢，需要升级为webpack5以提高开发效率。webpack5具有更高的Node.js版本要求，性能优化，更精确的代码分割，支持WebAssembly和Asset Modules等。具体配置包括添加缓存、升级脚手架、开启摇树优化、代码压缩等。
🎯
关键要点
-
AI云平台前端项目启动和编译缓慢，急需优化。
-
主要原因是脚手架过老，很多项目仍在使用webpack4。
-
启动和编译缓慢的原因包括重复生成编译文件和包体积过大。
-
解决方案包括添加缓存、升级脚手架到webpack5、开启摇树优化和代码压缩。
-
webpack5对比webpack4的优点包括更高的Node.js版本要求、性能优化、精确的代码分割、支持WebAssembly和Asset Modules等。
-
具体配置包括使用TerserPlugin进行代码压缩、使用CompressionPlugin进行gzip压缩、设置路径别名等。
-
优化前后构建速度对比需要记录。
-
问题记录包括插件配置迁移、v-show与display:flex的冲突、iview组件库Button外边距消失等。
➡️
