-
MT https://www.jianshu.com/p/c74221f2f442
- FP,FCP(),FMP,TTI(交互)
FP:仅有一个 div 根节点。
FCP:包含页面的基本框架,但没有数据内容。
FMP:包含页面所有元素及数据。
TTI:Time to inactive
lighthouse 测试
- FP,FCP(),FMP,TTI(交互)
-
首屏优化
-
提升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
-
-
网友评论