前端性能优化

优化思路（哪些方面）

• 网络连接速度

  • CDN

  • DNS预解析

    <link rel="dns-prefecth" href="https://mytest.net">

  • 持久连接

    connection: keep-alive

• 网络请求数量

  • 文件合并（webpack）

  • 图片处理

    • 雪碧图
    • 图片比较小的使用webpack压缩成 base64 格式，减小项目文件体积                             

      {
        test: /\.(png|gif|jpe?g)$/i,
        type: 'asset',              
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024,
          },
        },
        generator: {
          filename: 'images/[name][ext]',
        },
      },

    • 插件压缩图片： bat-sharp 等

  • 使用缓存

• 资源文件的体积

  • 压缩
  • 开启gzip

• 资源加载

  • 加载位置

    • css文件放在head中
    • js文件放在body结束标签前   
    • 原因：                                                                                                                                       
      1. <link href="./style.css" rel="stylesheet" />     
         代码是从上往下解析的，放在 html 结构底部时，⻚⾯会出现 html 结构混乱的情况
         href指向网络资源的所在位置,并行下载该文档，并且不会停止对当前文档的处理
      2. <script src="script.js"></script>
         src引用资源（js脚本、图片），将目标资源下载应用到当前文档；当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕 

  • 加载时机

    • 异步script标签加载，设置defer、async

• webpack优化

  • 打包公共代码

  • 动态导入

  • 长缓存优化

    • chunkhash
    • contenthash