主要来源于这篇文章:写给中高级前端关于性能优化的9大策略和6大指标 | 网易四年实践,算是这篇文章的学习笔记。
性能优化:从过程趋势来说,可分为网络层面和渲染层面;从结果趋势来说,可分为时间层面和体积层面。
一、网络层面
网络层面的优化就是让资源体积更小,加载更快。
1、构建策略 —— webpack
减少打包时间:缩减范围、缓存副本、定向搜索、提前构建、并行构建、可视结构
减少打包体积:分隔代码、摇树优化、动态垫片、按需加载、作用提升、压缩资源
(1)缩减范围:配置 include/exclude 缩小 loader 对文件的搜索范围。好处是避免不要的转义,node_modules 目录体积这么大,那得增加很长时间去检索文件。
(2)缓存副本:配置cache缓存Loader对文件的编译副本,好处是再次编译时只编译修改过的文件,未修改过的文件就不需要要随着修改过的文件重新编译了。
(3)定向搜索:配置resolve提高文件的搜索速度,好处是定向指定必须文件路径。若某些第三方库以常规形式引入可能报错或希望程序自动索引特定类型文件都可通过该方式解决。
alias
映射模块路径,extensions
表明文件后缀,