关于前端:加载速度优化专项-体积优化分享

加载速度优化专项 > 体积优化分享

说到加载速度优化咱们能想到什么？网上能找到一些什么内容？CDN？GZIP? 开启缓存？HTTP2? Tree-shaking？

这些内容对吗？不全对！接下来咱们针对性的剖析一下。

网络、加载速度优化

1. 为什么我说 CDN 能够提速不全对？脱离剂量谈毒性, 都是耍流氓 （这里指脱离环境一把梭哈不事实）
   CDN 是指是什么？CDN 的全称是 Content Delivery Network，即内容散发网络。CDN 是构建在现有网络根底之上的智能虚构网络，依附部署在各地的边缘服务器，通过核心平台的负载平衡、内容散发、调度等功能模块， 使用户就近获取所需内容，升高网络拥塞，进步用户拜访响应速度和命中率。CDN 的关键技术次要有内容存储和散发技术。

   1. 如果你的 CDN 自身节点比拟少，并没有笼罩全面，那么并不会提速。（比如说你买的这个 CDN 没有海内节点）
   2. 如果你的 CDN 是外网的，而你的我的项目是内网，那么速度反而会更慢。（内网的间隔比拟近，所以速度快，内网带宽足，所以速度快）
   3. 你的 CDN 是否能够承载你的申请量级？（比如说目前各大厂子都在自研本人的云服务，阿里云、腾讯云）
2. 开启 GZIP 真的提速了吗？是的真的提速了。然而个别服务器早都开启了。
   是没有损耗的嘛？有损耗每个文件都会计算 gzip，且无缓存。能够手动生成对应的 gz 文件。
3. 开启缓存？无脑缓存？看来你是没有被 ios 摆布过。
   一般来说缓存也都是开启状态。咱们目前个别的计划是 html 文件无缓存，js、css 强缓存 hash 管制。
4. HTTP2 真的是救星嘛？个别状况下是的，反对多路复用（冲破六个链接限度，比如说有慢接口，大文件），头部压缩。
   然而在高提早的状况下，HTTP2 反而会更慢

5. 有线 vs 无线（WIFI、4G），服务商对于网络有影响嘛？只有外网我的项目受影响嘛？

   1. 外网。服务商对于网络是有影响的，比方我家就是挪动，ping 局部 ip 丢包重大，光纤和 4G 都是如此。应用联通 4G 就什么问题都没有。

   2. 内网。这里举荐应用有线，比较稳定。这里分为两个场景：

      1. 公司，个别都是 AP 面板。然而有时候 AP 节点就是换不过去，偶然网络稳定。再看 P90 的数据的时候就特地难看。
      2. 家里，个别都是单个路由器。你能够参考在信号强时，和信号弱时比对加载速度。

体积优化

1. Tree-shaking。如同有了 Tree-shaking 就完事大吉了。

   1. 然而在 webpack4 当前就是默认开启的了。（yarn serve 不优化，yarn build 优化，外部通过环境变量管制的）
   2. Tree-shaking 只对 ES Module 起作用，对于 commonjs 有效，对于 umd 亦有效。
   3. 如果你的三方包不反对，那么就不反对。所以这里须要更新你包的版本，反对 按需 和 tree-shaking

2. 依赖共享。

   1. 比如说咱们写了一个 Request 库，外面用了 axios。而后咱们还有个音讯核心的库，外面也用了 axios。这个时候输入的包外面会有两个 axios。
      这里咱们用的是（monorepo Lerna yarn）+（config.externals）实现依赖共享，只载入一份 axios。

   2. 还有一个状况是咱们应用了按需组件库。然而主我的项目并没有按需，而是全量导入，导致载入了两遍 element-ui。解决办法就是主我的项目改成全量按需。

      [
       'component',
       {
       "libraryName": "element-ui",
       "styleLibraryName": "theme-chalk"
       }，'element-ui',
      ],

3. 分包。对于不须要的资源延时加载、异步加载。比如说有个流程核心，在你审批的时候同步加载了几千个流程。然而你只须要应用其中一个。

   1. vue 组件反对异步载入。当组件真的渲染的时候再去加载。

      Vue.component('async-example', function (resolve, reject) {setTimeout(function () {
              // 向 `resolve` 回调传递组件定义
              resolve({template: '<div>I am async!</div>'})
          }, 1000)
      })
      Vue.component(
          'async-webpack-example',
          // 这个动静导入会返回一个 `Promise` 对象。() => import('./my-async-component')
      )

   2. 对于大依赖（xlsx.js、echarts）或者其余不焦急的资源也能够异步加载

      injectFn() {if (this.injected) {return;}
          this.injected = true;
          if (this.useBuiltIn && this.username && this.Prop) {import('../../../inject.js').then(({inject}) => {inject(this.Prop!, this.username);
              });
          }
      }

   3. 合包。也不能拆太细，平白进步了 QPS。

      1. 什么叫压缩？说白了就是雷同和合并，比如说 ‘11111111111111111111’ 改成 ‘1’.repeat(20)

         内容压缩很简略，它就是移除多余的空白字符，插入单个的反复字符指出一个字符串中反复的字符，以及将小型的位串用频繁应用的字符代替。这种类型的压缩可能将文本文件的大小缩小 50%。压缩由应用特定公式和算法的程序来执行，它确定如何压缩和解压数据。
         gzip 应用 deflate 算法进行压缩。gzip 对于要压缩的文件，首先应用 LZ77 算法的一个变种进行压缩，对失去的后果再应用 Huffman 编码的办法

4. 正当的 babel 解决。比如说你的内网我的项目，那么能够只反对较高版本的浏览器，缩小 babel 和 polyfill。

   # 你晓得这代表了什么？> 1%
   last 2 versions # 示意将会反对 IE10 & IE11

逻辑优化

缩小串行代码。

1. Promise.all 代替 axios().then(() => axios())
2. axios1 = axios();axios2 = axios();await Promise.all(axios1,axios2); 代替 await axios();await axios();

总结

优化之路，相辅相成。

1. 优化网络，能够更快加载，也就能够更快执行。
2. 优化并发不阻塞，并行加载，也能够更快执行。
3. 优化体积，更小的体积，更高的复用，这样就能够应用更少的带宽，同样能够更快的执行
4. 应用缓存，更低的 QPS，提前做 DNS 解析。也能够让加载更快。

我的项目实战

TODO