面试准备之性能优化

性能优化

前言

我之前接手一个别人的项目,当时要求新增需求,等我做完打包后之后发现静态项目超过了17M,于是我想办法进行优化,最后只剩下2M左右,我是怎么做的呢?主要有四个方面:

一.网络请求相关

1.开启CDN,将第三库直接放到CDN上,不但减小了生产环境的体积,也加快了加载速度;
2.设置强缓存,在服务器中将长时间不会改变的第三方库或者静态资源max-age设置为强缓存,这样下次加载只会读取内存中的资源;
3.开启gzip压缩,使用compression-webpack-plugin插件输出gz压缩文件,同时服务器开启支持gzip压缩.
4.给link标签设置preload(提前加载首屏),preretch(提前懒加载)和dns-prefetch(提前dns解析);
5.服务器开启http2(支持多并发请求);
6.减少不必要的网络请求;

构建相关

1.路由懒加载;
2.第三方UI框架的按需引入;
3.升级最新的webpack;
4.预渲染(将loading直接注入到html中,减少第一次加载白屏时间);
5.使用webpack的DIIPlugin插件,减少第三方库的重复打包;
6.给不同的模块多创建文件名,减少遍历查找时间;
7.使用打包分析工具(webpack-bundle-analyzer);

静态资源相关(主要是图片)

1.图片懒加载;
2.使用雪碧图;
3.使用质量可以内存又小的svg(阿里图标支持)和webp图片;
4.图片压缩(在线压缩https://tinypng.com/或者 image-webpack-loader插件);

代码编写相关

比如拿vue来说:
1.v-if和v-show区分使用场景;
2.computed和watch区分使用场景;
3.v-for遍历必须为每个item设置key,且避免同时使用v-if;
4.事件的及时销毁;
5.使用nuxt.js进行SSR服务器端渲染;
6.使用防抖和节流;
7.避免重排和重绘;

react里的优化:
1.shouldComponentUpdate设置为false避免重复渲染;
2.使用生产版本的react.js;
3.使用key来标明循环的item;
4.开启next.js进行服务器端渲染;