浅谈性能优化实践篇

想到性能优化无外乎，cdn、懒加载、预加载、分屏、接口缓存等等，那今我就以我最近参与到的性能优化项目为例，说一下

一、性能优化的目标
      性能优化需要针对不同的项目，具体问题具体分析，根据性能数据分析， 定位影响加载时长的阶段，分析监控数据得出预期能优化到的目标，比如：接口如果返回数据需要1000ms，那么这个数据必然存在优化空间的，再比预取数据数据可以在init的时候调用接口，偏偏在mounted里调用，显然也存在优化空间等等，这也说明性能优化不只是前端或者后端的问题，是前后端配合或者都需要参与的工作。

二、可优化的方面

1、接口方面（需要服务端配合的方面）
        prelink：提前建立链接，提前发送预连接请求，将连接放入连接池，使用时直接拿出，节省DNS查询和建立TCP连接的时间
        redis缓存：

2、页面方面
        （1）预取数据/预加载   （prefetch\preload: https://juejin.cn/post/6893681741240909832）
        （2）非核心请求后置：将启动阶段的非核心请求（例如日志后置）在FMP之后被发送，减少核心请求的响应时间，设置defer: true，减少首屏数据的逻辑处理，减少setdata次数，减少http/https请求次数，雪碧图、文件压缩打包
        （3）cdn缓存：静态资源缓存如（react、react-dom、axios等），异步加载 script加载  （ defer：在HTML解析完之后才会执行。如果是多个，则按照加载的顺序依次执行。async：在加载完之后立即执行。如果是多个，执行顺序和加载顺序无关。）
       （4）避免组建重复打包：在webpack的config文件中，修改commonChunkPlugin的配置minChunks为2，这样就会把使用2次以上的包打包到公共文件中，避免重复加载组件。
       （5）tree-shaking 删除冗余代码
        （6）图片懒加载 / 图片压缩 / 小图片图文字体或者base64
        （7）分屏渲染：首次进入页面只渲染可视范围的内容，首次渲染结束，再异步渲染剩下的，列表只渲染几条，列表数据可以前端拆也可以获取到的就是几条，第二屏的内容可以通过事件触发渲染（滑动页面），除了纵向，横向也可能超过一屏，例如swiper

3、第三方插件方面
        框架版本升级，接入优化包（appjs 拆分，apack，css-module）
        预加载/懒加载
        cdn缓存
       UI框架按需加载，例如：import { button } from 'elementUI'

4、打包工具，以webpack为例
        减收主包体积的手段：分包减少包加载耗时
        （1）动态加载路由，减少入口文件体积：es6的import()方法与webpack的require.essure()都可以根据动态加载的组件来生成单独的chunk进行分包；
        框架版本升级
     （2）webpack提升打包速度
          1、配置 resolve.modules   减少检索路径
          2、配置装载机的 include & exclude  减少目录检索范围 在使用 loader 的时候，通过指定 exclude 和 incude 选项，减少 loader 遍历的目录范围，从而加快 Webpack 编译度。       
          3、使用 webpack-parallel-uglify-plugin 插件来压缩代码
          4、使用 HappyPack 来加速代码构建
          5、利用 DllPlugin 和 DllReferencePlugin 预编译资源模块-拆分bundles

    （3）webpack优化打包的大小，减小打包体积
          1、 Tree Shaking  Tree Shaking 可以实现删除项目中未被引用的代码  webpack4的话，开启生产环境就会自动启动这个优化功能。
          2、 splitchunkspluginwebapck4抽取公共模块“SplitChunksPlugin” commenChunkPlugin 提取公共代码组件
          3、合理使用 sourceMap （去除devtool选项 ）
             很多教程都会教你在webpack.config.js设置devtool选项，比如：devtool:'eval-source-map'。但是这只适用于开发环境，这会导致打包的文件往往有几M,所以在生产环境必须要去除掉此配置。
            把部分依赖转移到 CDN 上，避免在每次编译过程中都由 Webpack 处理，通过script加载（externals将第三方库以cdn的方式去引入                                        https://www.cnblogs.com/ssh-007/p/7944491.html）
            4、 使用 webpack-parallel-uglify-plugin 插件来压缩代码
            5、   分离css。安装插件 npm install extract-text-webpack-plugin --save

三、秒开实践
     https://smartprogram.baidu.com/docs/develop/performance/experience/

四、性能监控工具
        通过性能打点来监控页面性能，并通过性能数据得出可优化空间

五、自测数据获取方法
        （1）获取方法运行时长
                 console.time 和 console.timeEnd
        （2） 准确获取首屏加载时间
                 (performance.timing.domComplete - performance.timing.navigationStart) / 1000
        （3）获取首页图片的加载时长
                 针对某张图片：imagesloaded插件（done / fail / progress）

总结：以上优化点未必都会涉及，需要根据自身项目特点来判断使用哪一种方案，这些方案只是提供了一个方向和思路。后续还会持续补充，大家有什么好的建议和意见欢迎留言。