手摸手将Vue2升级Vue3 + 打包构建优化
💡
原文中文,约14700字,阅读约需35分钟。
📝
内容提要
本文介绍了将Vue2项目升级至Vue3项目的方法,并通过webpack工具对项目进行性能优化。首先进行项目初始化,然后升级Vue依赖和配置启动插件和编译依赖。接下来讲解了项目打包构建优化的方法,包括构建速度分析、构建体积分析、多进程/多实例、分包、利用缓存提升二次构建速度以及去除无用css。
🎯
关键要点
- 本文介绍了将Vue2项目升级至Vue3项目的方法。
- 使用webpack工具对项目进行性能优化。
- 项目初始化包括克隆项目和安装依赖。
- 升级Vue依赖和配置启动插件及编译依赖。
- 设置路径别名以便于项目结构管理。
- 升级vuex和vue-router以适应Vue3的变化。
- 修改接口地址以确保项目正常访问。
- 项目打包构建优化包括构建速度和体积分析。
- 使用多进程和分包技术加快构建速度。
- 利用缓存提升二次构建速度。
- 使用purgecss-webpack-plugin去除无用css以减小打包体积。
➡️