五.性能优化

1.网站性能

1.1 数量

• 使用 cdn
• 小图用 base64
• 雪碧图，字体图表
• dns 预解析预先获取域名对应的 ip
• 懒加载
• 减少 iframe 使用
• 避免重定向
• 减少 DNS 查询，控制资源的 dns 解析在 2 到 4 个域名
• 缓存资源

1.2 体积

• 使用 cdn
• 小图用 base64
• 压缩资源，减小请求头
• 提取公共样式和组件、方法
• 代码压缩：UglifyJS
• Scope Hoisting 会分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去
• Tree Shaking 可以实现删除项目中未被引用的代码

1.3 距离

• 使用 cdn

1.4 资源渲染

• 节流和防抖
• 减少对字符串计算
• 合理使用闭包
• 首屏的 js 资源加载放在最底部
• 少用全局变量、缓存 DOM 节点查找的结果
• css 属性读写分离
• 减少 js 修改样式
• dom 离线更新
• 渲染前指定图片的大小
• 减少 DOM 元素数量
• 减少 DOM 操作
• 尽量使用事件代理，避免直接事件绑定
• 懒执行

2.编译阶段

• 优化 loader：babel-loader
• resolve.alias:可以通过别名的方式来映射一个路径，能让 Webpack 更快找到路径。
• module.noParse:如果你确定一个文件没有其他依赖，就可以使用该属性让 Webpack 不扫描该文件，这种方式对于大型的类库很有帮助。

3.打包阶段

• 并行打包：HappyPack
• 减少打包次数：DllPlugin
• resolve.extensions:用来表明文件后缀列表，默认查找顺序是['.js',''.json],如果你的导入文件没有添加后缀就会按照这个顺序查找五年级。我们应该尽可能减少后缀列表长度，然后将出现频率高的后缀排在前面。