网页优化专刊-加载速度优化专刊-体积优化

加载速度优化专刊>体积优化分享说到加载速度优化，我们能想到什么？网上能查到什么？加速网络？压缩包？启用缓存？HTTP2？摇树？这些内容是否正确？不太对！接下来，我们来详细分析一下。网络、加载速度优化为什么我说CDN可以加速是不正确的？不加剂量就谈毒性，都是耍流氓（在这里，脱离环境谈种马是不现实的）CDN是什么意思？CDN的全称是ContentDeliveryNetwork，即内容分发网络。CDN是建立在现有网络基础上的智能虚拟网络。依托部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，用户就近获取所需内容，减少网络拥塞。提高用户访问响应速度和命中率。CDN的关键技术主要包括内容存储和分发技术。如果你的CDN本身节点比较少，覆盖不全面，是提不上速度的。（比如你买的CDN没有海外节点，但是你想提高海外节点的访问速度。）如果你的CDN在外网，你的项目在内网，速度反而会慢.（内网距离比较近，所以速度快，内网带宽足够，所以速度快）你的CDN能承载你请求的量级吗？（比如目前各大厂都在开发自己的云服务，阿里云，腾讯云）开启GZIP真的会提速吗？是的，它确实加快了速度。但是通用服务器已经开启了。没有损失吗？有损计算每个文件的gzip，无缓存。可以手动生成对应的gz文件。启用缓存？无脑缓存？看来你还没有被ios支配。一般来说，缓存也是开启的。我们目前通用的方案是对html文件不缓存，对js和css强缓存hash控制。HTTP2真的是救星吗？总的来说，是的，它支持多路复用（打破6个链接的限制，比如接口慢，文件大），以及头压缩。但是在高延迟的情况下，HTTP2会比较慢。有线vs无线（WIFI、4G），服务提供商对网络有影响吗？只有外网项目受影响吗？外联网。服务提供商对网络有影响。比如我家是移动的，ping部分的ip丢包严重，光纤和4G都是这样。联通4G没问题。内联网。这里推荐使用有线，更稳定。这里有两种场景：公司，一般是AP面板。但有时AP节点就是无法更换，网络时有波动。看P90的数据特别难看。在家里，通常只有一个路由器。可以参考比较信号强和信号弱时的加载速度。体积优化Tree-shaking。好像有了Tree-shaking，一切就都结束了。但是webpack4之后默认是开启的。（yarnserve没有优化，yarnbuild有优化，内部受环境变量控制）tree-shaking只对ESModule有效，对commonjs无效，对umd也无效。如果你的第三方包不支持，那就不支持。所以这里你需要更新你的包的版本以支持按需和tree-shaking依赖共享。比如我们写了一个Request库，它使用了axios。然后我们还有一个消息中心库，也是用的axios。这时候输出包中会有两个axios。这里我们使用（monorepoLernayarn）+（config.externals）实现依赖共享，只加载一份axios。还有一种情况是我们使用按需组件库。但是主工程没有按需，而是全量导入，导致两次加载element-ui。解决办法就是把主项目改成完全按需。['component',{"libraryName":"element-ui","styleLibraryName":"theme-chalk"},'element-ui',]分包。延迟加载和异步加载不必要的资源。比如有一个流程中心，在你审批的时候，同时加载上千个流程。但是你只需要使用其中之一。Vue组件支持异步加载。当组件真正被渲染时，它会被加载。Vue.component('async-example',function(resolve,reject){setTimeout(function(){//将组件定义传递给`resolve`回调resolve({template:'

'})},1000)})Vue.component('async-webpack-example',//这个动态导入返回一个`Promise`对象。()=>import('./my-async-component'))对于大依赖（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!,这个.用户名);});}}关闭包。不能拆的太细，QPS没来由的提升。什么是压缩？说白了就是一样，合并。例如，'11111111111111111111'更改为'1'。repeat(20)内容压缩很简单，就是去除多余的空白字符，插入单个重复字符指出字符串中重复的字符，用常用字符替换小位串。这种类型的压缩可以将文本文件的大小减少多达50%。压缩由程序执行，这些程序使用确定数据压缩和解压缩方式的特定公式和算法。gzip使用deflate算法进行压缩。对于需要压缩的文件，gzip首先使用LZ77算法的变体进行压缩，然后使用哈夫曼编码方式将得到的结果用babel进行适当的处??理。比如你的内网项目，只能支持高版本的浏览器，减少babel和polyfill。#你知道这是什么意思吗？>1%last2versions#表示将支持IE10&IE11逻辑优化，减少串行代码。Promise.all而不是axios().then(()=>axios())axios1=axios();axios2=axios();awaitPromise.all(axios1,axios2);而不是awaitaxios();awaitaxios();总结优化之路，取长补短。优化网络，你可以加载得更快，你可以执行得更快。优化并发性而不阻塞、并行加载和更快的执行。优化大小，更小的大小，更高的复用，这样就可以使用更少的带宽，提前使用缓存、更低的QPS、DNS解析，可以更快的执行。它还可以使加载速度更快。项目实战，我在仓库中提供了一些最简单的案例：Demo仓库地址，大家只需要看例子就可以直接看出问题（然后就可以优化了）。例如：ChromeDevToolsLighthouse的分析方法可以在这里给我们的页面打分，它也会给出优化建议。如果你能把这里的一切都做好，你的页面加载就会起飞。来看看师傅的首页，评分还是挺高的。但是，如果它们是静态的和直接的，那肯定会好得多。一般比较慢的就是vue、react、单页应用、后台的巨石应用。再来看看掘金队的主页。这个分数几乎是个问题。可以看到有一些优化建议。好像他们主页上的数据好像是个骨架，然后后面返回的数据。之前听说过26分，所以我来看看。ChromeDevToolsNetwork这里主要是看网络阻塞情况，比如http1.1的时候请求有没有阻塞你。yarnbuild--report主要是分析包体积，我用的工具主要是这个。比如这个例子，可以看到有多个axios，以及每个axios导入的地方。这时候可以考虑通过peerDependencies或者externals来处理这类资源。ChromeDevToolsPerformance主要分析代码执行效率。