从输入url发生了什么，谈前端页面性能优化

 

简单分析一下每一步的优化措施：

减少请求数

• 小图标可以用iconfont 
• webpack打包使用 url-loader ，把小图片转成base64
• 雪碧图（使用起来很麻烦，不推荐）

合理利用缓存

• 使用contenthash。

hash是跟项目相关，项目有变化，hash只就变，那么缓存就是失效

chunkhash跟webpack入口配置相关，从入口开始分析，涉及的依赖有变化，那么hash值就变化，缓存失效

contenthash只跟文件内容相关 ，只有当文件内容真正有改动，hash值才变化

•  分离第三方包

因为项目每一次发布新版本，第三方包几乎不会有变化，如果打包到自己的业务代码里边，因为业务相关的 js 是需要更新的，那么里面的第三包代码其实就多加载了。

分离第三方包还可以减少后续发布的代码体积

利用cdn网络加速

构建生产包时，可以给一些比较常见的包，通过cdn的方式引入，起到加速的效果。关于加速原理可以了解一下

把一些库通过cdn的引入也会减少业务代码的体积

压缩资源

• webpack打包时使用uglifyJsPlugin压缩js ，其中编写代码时尽量 按需引入，充分利用treeShaking
• 把图片压缩成webp格式
• 把公共包通过设置splitChunks分离出来

按需加载

• 非首屏资源可以先不加载
• 路由懒加载（原理就是动态创建script标签加载资源）

 

减少重排

措施比较多，反正目的就是减少重排。