前端优化问题（1）

一、 你对优化这块了解多少?

大体常见的手段了解.

比如从客户端着手的:

• 压缩代码(JS/CSS),压缩图片
• 合并一些小图片(css sprite)
• 若是打包的代码尽可能切割成多个 chunk,减少单一 chunk过大
• 静态文件采用 cdn 引入
• HTTP的缓存头使用的合理
• 减小第三方库的依赖
• 对于代码应该考虑性能来编写,比如使用requestAnimationFrame绘制动画,尽可能减少页面重绘(DOM 改变)
• 渐进升级,引入preload这些预加载资源
• 看情况用service worker来缓存资源(比如移动端打算搞 PWA)

比如从服务端着手:

• 带宽,域名解析, 多域名解析等
• 页面做服务端渲染,减小对浏览器的依赖(不用客户端解析)
• 渐进升级,比如引入 HTTP2(多路复用,头部压缩这些可以明显加快加载速度)

当然,这是这些都是很片面的点到…实际工作中去开展要复杂的多;

比如我们要多个维度去考虑的话,要去优化 DOM 的绘制时间,资源的加载时间,域名解析这些;

要全面的优化一个项目是一个大工程…

二、 webpack 是什么?webpack 常见的优化手段有哪些;

webpack 是一个资源处理工具,它的出现节省了我们的人力和时间; 可以对资源打包,解析,区分开发模式等等…

常见的优化手段:

• 分离第三方库(依赖),比如引入dll
• 引入多进程编译,比如happypack
• 提取公共的依赖模块,比如commonChunkPlugin
• 资源混淆和压缩:比如UglifyJS
• 分离样式这些,减小bundle chunk的大小,比如ExtractTextPlugin
• GZIP 压缩,在打包的时候对资源对齐压缩,只要部署的服务器能解析即可…减少请求的大小
• 还有按需加载这些,一般主流的框架都有对应的模块懒加载方式.
• 至于tree shaking目前webpack3/4已经默认集成