从代码/资源/webpack方面考虑前端的性能优化

从三个维度简单整理一下前端性能优化可以做什么（不同维度之间有重叠）：

• 代码优化

1. 减少dom操作，避免引起重绘和重排（回流）
2. 事件绑定采取事件委托的方式（减少dom引用和内存占用）
3. 减少闭包的使用（避免内存溢出，减少作用域链的查找层级）
4. 使用函数防抖/节流 （避免无限制调用）
5. 使用css选择器时减少选择层级（css选择器是从右向左解析的，原来层级越多查找越慢TT）

• 资源优化

1. 使用tinypng等压缩图片资源
2. 使用精灵图（减少请求次数）
3. 使用cdn链接方式引入
4. 合并/压缩js、css文件（减少http请求次数）
5. 按需加载/懒加载
6. 善用缓存（强缓存/协商缓存～）

• webpack打包优化（主要是plugin插件方面...）

1. 使用UglifyJsPlugin压缩js代码。
2. 使用ExtractTextPlugin从主程序中分离出单独的css文件（缺点：如果本身css写在html里会多一次http请求，优点：如果原本有多个css文件也就只会有一次http请求，而且可以单独缓存css，CSS bundle 可以和 JS bundle 并行加载）。
3. 使用CommonChunkPlugin，提取不同chunk中用到的公共模块到一个bundle中，避免重复打包。
4. 使用HashedModuleldsPlugin，避免在添加/删除模块时，因为其他模块的hash变化，造成无用的构建。
5. 使用DedupePlugin去重，避免打包构建出重复/相似的模块。
6. 使用OccurenceOrderPlugin，使webpack可以分析和优先考虑最常用模块，为其分配最小的id（id越小模块找到速度越快）。
7. 使用externals配置拓展第三方库，再使用script标签引入cdn链接，使用import导入。避免打包第三方库，在运行时再去外部获取这些拓展依赖。
8. 动态加载/懒加载import。
9. webpack对图片/icon的优化（比如针对资源优化中的1、2两点）
   1. 使用url-loader，通过设置options中的limit来处理图片，小于limit的转为base64编码的字符串，大于limit时自动调用file-loader（返回带hash值的url）
   2. 使用image-webpack-loader，压缩图片（配合url-loader）
   3. 引入webpack-spritesmith，合成精灵图。