首屏优化 & 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