-
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
-
-
首屏优化 & webpack优化
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前端性能优化，不得不提的就是这个首屏渲染优化 首屏渲染优化 其实更具体点，应该是：首次加载首屏渲染优化，原因是某些...
