1、为什么要把vue3升级到vue3

vue2的缺陷

vue2 代码复用困难，Ve2 的代码复用方式有 Mixin，但容易出现命名冲突，且无法解决业务逻辑复用
vue2 对于 typeScript 的支持不足
vue2 内部实现过渡依赖 this，导致无法进行 treeshaking

vue3的优势

vue3支持vue2的大多数特性能够实现对vue2的向下兼容
vue3对比vue2具有明显的性能提升
    打包大小减少41%
    初次渲染快55%，更新快133%
    内存使用减少54%
vue3具有的composition API实现逻辑模块化和重用
vue3.2通过setup语法糖进一步简化开发，可以编写更加优雅的代码
vue3脚手架默认实现对typescript的支持
vue3脚手架默认实现对typescript的支持，增加了很多新特性，如:Fragiment、Teleport、Suspense

2、vue全家桶的依赖升级

 vue升级到3.0， 
 vue-router升级到4.0.0-0
 vuex升级到4.0.0-0

3、webpack性能优化的原理和目标

1、构建性能优化方法

 查找并诊断性能瓶颈
 构建速度分析:影响构建性能和开发效率
 构建体积分析:影响页面访问性能

2、构建性能优化常用方法:

  通过多进程加快构建速度
  通过分包减小构建目标容量
  减少构建目标加快构建速度

4、分析构建速度测量插件speed-measure-webpack-plugin

1、使用方法（也可以查看官网）：

2、在configuerWebpack中用 smp.wrap()

3、启动项目在终端会出现

5、构建体积分析插件 webpack-bundle-analyzer

1、会生成一个页面

6、多进程/多实例 thread-loader

这个插件适合在项目体积比较大的时候去使用，不然反而会影响构建速度，因为还要加载thread-loader。在生产环境中可以使用parallel=true这个去配置打包的构建速度

7、webpack5分包策略

1、分包DllPlugin && DllReferencePlugin->可以把一些变化很小的包进行提前打包。不用每次都build的时候再去打包

2、分包的具体步骤

分包：定义webpack.dll.config.js，使用DlIPlugin配置分包，定义scripts命令，执行命令，完成分包
排除分包:在vue.config.js中，使用DllReferencePlugin引用manifest文件排除分包
拷贝d1:将dIl拷贝至项目目录下
引用dl:使用add-asset-html-webpack-plugin引用分包文件

8、利用webpack5 cache特性进行构建速度的提升

9、image-webpack-loader进行图片5倍压缩

10、删除css未使用部内容 & purgecss-webpack-plugin

11、文件的压缩 Minification

12、首屏的优化

从三个点考虑：

资源体积是否太大

资源压缩、传输压缩（Gzip压缩）、代码拆分、Tree shaking、缓存等

首页内容是否太多

路由/组件/内容进行lazy-loading、预渲染/SSR、Inline CSS

加载顺序是否合理

可以使用prefetch：把后面需要用到的，提前加载（当前页面不需要，但是其他页面需要，会在当前页面加载完有空闲的时候进行提前加载）
preload: 修改当前加载顺序

【Vue3框架升级】Vue2升级Vue3 & 【Webpack性能优化】