一.源码优化
1.代码模块化，封装成单独的组件，复用性越高越好，可配置型越强越好，包括css也可以通过less和sass的自定义css变量来优化
2.设置key 值，不仅仅是v-for ，由于vue 内部 diff算法，例如 动态加载的 表单
3.Vue路由，组件 设置成懒加载，当首屏渲染的时候，能够加快渲染速度。（require, import）
4.理解Vue的生命周期，不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null
5.keep-alive对组件进行缓存。
6.对于频繁切换的组件使用v-show
7.使用冻结对象，因为普通对象Vue会使用Object.defineProperty（Vue3 Proxy）重写对象属性,但是对象如果是冻结对象则不会转化（当有些数据不需要做成相应式的时候可用）
8.使用函数式组件（函数式组件是一种定义自身没有任何状态的组件的方式。它们很像纯函数：接收 props，返回 vnodes。函数式组件在渲染过程中不会创建组件实例 (也就是说，没有 this)，也不会触发常规的组件生命周期钩子。）官网 https://cn.vuejs.org/guide/extras/render-function.html
9.使用计算属性（如果模板中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性以缓存它们
）
10.使用延迟装载（defer），利用 requestAnimationFrame 分批次加载组件
二．打包优化
1.修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，并且在生成环境是可以通过map去查看到源码的，这样会造成源码泄漏。productionGzip设置为true可以开启gzip压缩，使打包过后体积变小。
2.使用cdn的方式外部加载一些资源，比如vue-router、axios等Vue的周边插件,在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式引入需要的插件。
image.png
image.png
