技术博客文章总结

一、Webpack 优化

resolve 常用选项：

  1. extensions: 表示 webpack 会根据 extensions 去寻找文件后缀名
  2. alias: 表示设置别名
  3. noParse: 表示不需要解析的文件
  4. exclude: 是指定 loader 作用的范围，exclude 表示排除某些文件不需要对应 loader 处理

loader,plugins 优化：

  1. cache-loader
  2. webpack-parallel-uglify-plugin, uglifyjs-webpack-plugin, terser-webpack-plugin
  3. happypack, parallel-webpack, thread-loader
  4. DllPlugin,webpack.DllReferencePlugin

其他优化配置：

  1. webpack-bundle-analyzer: 可以用可视化帮我们分析打包体积，从而来采用合适的优化方式去改进我们的 webpack 配置

  2. speed-measure-webpack-plugin: 可以告诉我们打包时候每一个 loader 或者 plugin 花费了多少时间，从而对耗时比较长的 plugin 和 loader 做优化

  3. friendly-errors-webpack-plugin: 可以帮我们优化打包日志

二、静态文件优化

1. 图片优化

图片格式

  • jpg: 适合色彩丰富的图片、banner 图。不适合图形文字、图标（边缘有锯齿），不支持透明度
  • png: 社会纯色、透明、图标、支持半透明。不适合色彩丰富的图片，因为无损存储会导致存储体积大
  • gif: 适合动画，动的图标。不支持半透明、不适合存储色彩图片
  • webp: 适合半透明，可以保证图片质量和较小的体积
  • svg: 相比于 jpg 和 png，它的体积更小。渲染成本过高，适合小且色彩单一的图标

图片优化

  • 避免空 src 的图片
  • 减少图片尺寸，节约用户流量
  • img 标签设置 alt 属性，提升图片加载失败时用户体验
  • 原生的 loading: lazy 图片懒加载
  • 不同环境下，加载不同尺寸和像素的图片
  • 对于较大的图片可以考虑采用渐进式图片
  • 采用 base64URL 减少图片请求
  • 采用雪碧图合并图标图片等

2. HTML 优化

  • 语义化 HTML: 代码简洁清晰，利于搜索引擎，便于团队开发
  • 提前声明字符编码，让浏览器快速确定如何渲染网页内容
  • 减少 HTML 嵌套关系，减少 DOM 节点数量
  • 删除多余空格、空行、注释、以及无用的属性等
  • HTML 减少 iframe 使用
  • 避免使用 table 布局

3. CSS 优化

  1. 减少伪类选择器、减少样式层数、减少使用通配符
  2. 删除空行、注释、减少无意义的单位，css 进行压缩
  3. 使用外链 css, 可以对 css 进行缓存
  4. 添加媒体字段，只加载有效的 css 文件
    <link href="xxx" rel=“stylesheet” media="screen and (min-width: 1024px)">
  5. 减少 @import 使用，因为 @import 采用的是串行加载

4. JS 优化

  1. 通过 async、defer 异步加载文件
  2. 减少 DOM 操作，缓存访问过的元素
  3. 操作不直接应用 DOM 上，而应用到虚拟 DOM 上。最后一次性的应用到 DOM 上
  4. 使用 web-worker 解决程序阻塞问题
  5. IntersectionObserver
  6. 虚拟滚动 virtual-scroll-list
  7. requestAnimationFrame、requestIdleCallback
  8. 尽量避免使用 eval ，消耗时间久
  9. 使用 事件委托，减少事件绑定个数
  10. 尽量使用 canvas 动画、css 动画

三、优化策略

  • 关键资源个数越多，首次页面加载时间越长
  • 关键资源的大小，内容越小，下载时间越短
  • 优化白屏：内联 css 和内联 js，移除文件下载，较小文件体积
  • 预渲染，打包时进行预渲染
  • 使用 SSR 加速首屏加载（耗费服务端资源），有利于 SEO 优化

← 经典 →