五.性能优化

1.编译时间

• 优化 loader：babel-loader

• resolve.alias:可以通过别名的方式来映射一个路径，能让 Webpack 更快找到路径。

• module.noParse:如果你确定一个文件没有其他依赖，就可以使用该属性让 Webpack 不扫描该文件，这种方式对于大型的类库很有帮助。

• 按需加载 splitChunks

• dllplugin

• 路由懒加载

• hmr

2.打包时间

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

3.请求时间

3.1 数量/频率

• 1.减少数量：减少 DNS 查询、减少 iframe、避免重定向、缓存资源、小图用 base64、雪碧图，字体图表
• 2.降低频率：dns 预解析、防抖、懒加载、使用 cdn

3.2 体积

• 1.去掉多余代码：Tree Shaking 可以实现删除项目中未被引用的代码
• 2.合并公共代码：Scope Hoisting 会分析出模块之间的依赖关系，尽可能的把打包出来的模块合并到一个函数中去
• 3.压缩代码：html、css、js：UglifyJS、提取公共样式和组件、方法、小图用 base64
• 4.请求体积：压缩资源gzip，减小请求头、响应头、减少cookie

3.3 距离

• 服务器就近部署
• 使用 cdn

4.浏览器渲染时间

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