首屏优化 & webpack优化

MT https://www.jianshu.com/p/c74221f2f442

• FP，FCP（），FMP，TTI（交互）
  FP：仅有一个 div 根节点。
  FCP：包含页面的基本框架，但没有数据内容。
  FMP：包含页面所有元素及数据。
  TTI：Time to inactive

lighthouse 测试

首屏优化

• 提升30%（500ms）

• 懒加载

  • 长页面加载过程时，先加载关键内容，延迟加载非关键内容
  • 图片懒加载
  • 路由懒加载
  • 滚动加载

• 缓存

  • 资源缓存

• 离线化

• 并行化

• 预先加载 prefetch

  • dns-prefetch

  • Preconnect

    • TCP握手和TLS

  • prefetch

• webpack开启gzip压缩，文件小速度快

• CDN 加速原理

webpack打包优化（针对某几个plugin/ loader阅读源码；）

• 开发环境

  • DLLPlugin 动态链接库

  • 减少执行构建的模块

    • 按需引入类库模块

      • lodash-es.js

    • IgnorePlugin

  • Externals

  • 提升单个模块构建的速度

    • 配置babel-loader中的 include/exclude,

    • Resolve

      • 置制定的是在构建时指定查找模块文件的规则

    • noParse

      • 省略了使用默认 js 模块编译器进行编译的时间

    • Source Map

  • 并行构建以提升总体效率

    • HappyPack 与 thread-loader

• 生产环境

  • 面向 JS 的压缩工具

    • Terser 和 UglifyJS 插件中的效率优化

  • 面向 CSS 的压缩工具

    • CSSMinimizerWebpackPlugin

      • 支持缓存和多进程

  • Split Chunks

    • 路由懒加载，分包
    • 多入口
    • 抽取公共代码，也会提取出一个chunk（与CommonsChunkPlugin有何区别？？文件大小确实小了吗？）

  • Tree Shaking