前端--性能优化【下篇】--框架优化与webpack优化

七、框架优化

Vue

1. v-for添加key
2. 路由懒加载
3. 第三方插件按需引入
4. 合理使用computed和watch
5. v-for的同时避免使用v-if
6. destory时销毁事件：比如addEventListener添加的事件、setTimeout、setInterval、bus.$on绑定的监听事件等
7. 使用tree-shaking，只引入我们实际需要的代码，不是整个库
8. 组件优化，可以使用v-if和v-else来减少不必要的DOM渲染
9. CND优化

React

1. 路由懒加载

2. 第三方插件按需引入

3. 使用scu，memo或者pureComponent避免不必要的渲染

4. 合理使用useMemo、memo、useCallback

   他们三个的应用场景都是缓存结果，当依赖值没有改变时避免不必要的计算或者渲染。

5. • useCallback 是针对函数进行“记忆”的，当它依赖项没有发生改变时，那么该函数的引用并不会随着组件的刷新而被重新赋值。当我们觉得一个函数不需要随着组件的更新而更新引用地址的时候，我们就可以使用 useCallback 去修饰它。
   • React.memo 是对组件进行 “记忆”，当它接收的 props 没有发生改变的时候，那么它将返回上次渲染的结果，不会重新执行函数返回新的渲染结果。
   • React.useMemo是针对 值计算 的一种“记忆“，当依赖项没有发生改变时，那么无需再去计算，直接使用之前的值，对于组件而言，这带来的一个好处就是，可以减少一些计算，避免一些多余的渲染。当我们遇到一些数据需要在组件内部进行计算的时候，可以考虑一下 React.useMemo

八、webpack优化

1、缩小loader的匹配范围

• 优化loader配置
• test、include、exclude三个配置项来缩⼩loader的处理范围
• 推荐include

2、resolve.modules

用于配置webpack去哪些目录下寻找第三方模块，默认是 node_modules。

寻找第三方，默认是在当前项目目录下的node_modules里面去找，如果没有找到，就会去上一级目录…/node_modules找，再没有会去…/…/node_modules中找，以此类推，和Node.js的模块寻找机制很类似。

如果我们的第三⽅模块都安装在了项⽬根⽬录下，就可以直接指明这个路径。

3、resolve.extensions

在导⼊语句没带⽂件后缀时，webpack会⾃动带上后缀后，去尝试查找⽂件是否存在。

• 后缀尝试列表尽量的⼩
• 导⼊语句尽量的带上后缀。

如果想优化到极致的话，不建议用extensionx, 因为它会消耗一些性能

4、抽离css

5、代码压缩

压缩html，css，js代码

6、压缩文件大小

减少http传输过程中对宽带的损耗

7、图片压缩

8、tree-shaking

9、拆分代码

对代码进行分开打包，从而提高首屏加载速度