项目性能优化简述

一、分析影响性能的原因webpack-bundle-analyzer插件

对于vue项目优化，webpack-bundle-analyzer可以让我们可视化的查看打包后项目中的依赖以及各个模块的大小，删减不需要的依赖，优化拆分体积过大的模块，

1.安装插件

npm i webpack-bundle-analyzer

2.增加脚本命令

package.json文件 
"scripts":{
    ....,
    build:"cross-env NODE_PAGE=$page vue-cli-service build",
    analyzer:"cross-env use_analyzer=true npm run build"
}
vue.config.js文件中 通过use_analyzer值判断
module.exports={
    chainWebpack:config=>{
        if(process.env.use_analyzer){
            config.plugin("webpack-bundle-analyzer").use(require("webpack-bundle-            
            analyzer").BundleAnalyzerPlugin
        }
    }
}

3.执行 npm run analyzer 打包结束后即可在网页上看到类似如下页面

简单来说图形面积即代表了打包后的体积，将面积较大的模块进行优化或拆分总是没错的

注：关于该图都提供了哪些信息，我们如何利用图示信息，从而确定优化的方向，请参考以下文章 webpack-bundle-analyzer 插件配置使用方法_javascript技巧_脚本之家

二、优化的几个方面

1.基于上述进行模块的优化

a:分析大体积模块在业务中的引用率是否可删除找其它方案替代

b:分析大体积模块是否由于嵌套引入其它文件导致体积增大，考虑进行拆分处理 注：拆分并不是越精细越好

c:对于一些第三方资源(如：swiper、loadsh) 可以考虑cdn引入，或放在静态资源目录public/lib下

2.网络资源的优化 

axios之cancelToken取消网络请求

h2当用户请求当前A页面数据没有加载完时，切换到下个页面B，将A页面未访问的网络请求取消掉不在请求，而是加载新的页面B的请求

参考文章：

不知道如何取消axios请求的小伙伴看这里【canceltoken】_yezi__626的博客-CSDN博客

【JS】Axios取消未完成请求解决Tab频繁切换数据问题_切换tab时终止请求_zoe驿鹿的博客-CSDN博客

Axios cancelToken学习使用_Vgbire的博客-CSDN博客

3.缓存优化

解决处理的问题是：当从产品详情页返回到产品列表页时只进行接口的请求不加载前端的静态资源时，将上次的在产品列表的数据进行缓存，这样因为有缓存从详情页返回时就不会因为在created中请求接口结束后才渲染页面造成页面短暂的白屏现象，而是先取缓存数据（如果在actived中进行接口请求的话会更新替换掉原始的缓存数据，以保证数据的准确）

解决办法：route.meta   + keeplive

1.app.vue中加keep-alive
如：
<template>
    <div id="app">
        router-view(v-if="!$route.meta.isKeepLive">
        keep-alive
            router-view(v-if="$route.meta.isKeepLive">
    </div>
</template>
2.路由文件中对需要进行缓存的路由的meta属性加上isKeepLive:true 
如：
{
    path:"/home",
    name::"home",
    component:()=>import(/*webpackChunkName:"home"*/ "src/views/home)
    meta:{
        isKeepLive:true
    }
}
3.home.vue文件修改
created周期改为actived,keep-alive包裹的组件created只会走一次，actived页面显示就会走该周期，
a:对于不是时时改变的数据，在created里请求一次接口即可，actived周期不再调接口，比如tab的切换
b:对于数据可能更换比较快的，created周期建议不请求接口，而是在actived里请求以保证数据都是最新的，这样在保正数据展示无误的情况下，因为有缓存数据也可以解决在created中请求接口造成的摆平现象

4.路由优化

将路由加载变成异步的方式如下，但是注意路由中的webpackChunkName的值，访问相同的webpackChunkName时所有相关的模块都会加载，也是达不到按需加载效果的，注意区分webpackChunkName，保证访问某个页面时不加载无用页面的内容

component:()=>import(/*webpackChunkName:"home"*/ "src/views/home)

5.编写本地插件

无需再去请求CDN资源直接取本地的即可一般放在pulid/lib下

6、添加骨架屏

7、引入CDN资源

externals处理打包时排除指定的第三方库,如下

config.externals({
  vue:"Vue"，
  vuex:"Vuex",
  vue-router:"VueRouter"  
})

vue打包后，vendor过大，导致打包速度慢加载慢，原因第三方库如vue、vuex、swiper等会被打包，浏览器加载完才显示首屏，可通过引入cdn资源的方式，并发的加载第三方文件

tips：vue.config.js中，externals配置了，才可以引入cdn，且引入cdn的版本一定要和package-lock.json中模块的版本号一致，否则会报错，如果没有package-lock.json，则按照package.json文件中的来

8、优化chunks

因为打包后app.js和vendor.js包体积太大，为了并发的快速请求到前端静态资源，将大的独立模块进行拆分

注：业务模块拆分顺序父=>子

const chunks = ['q','w','e']

参考：Vue 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案_卡尔特斯的博客-CSDN博客

三、其它

1、css优化

注意项目中的全局样式是否引入了大量图片，图片会以base打入到app.css中，有的话建议尽量提出去

2、优化全局组件

 查看是否将大多组件都在放在了一个文件夹下(如：commonents），并在main.js中引入commonents从而导致首次加载所有commonents下的相关组件都要被加载，耗费资源影响首屏加载速度

3.webp图片格式配置

.增加webp插件，解h3析打包后的图片增减webp图片，图片体积可缩小10倍左右（注：并不是所有浏览器都支持webp，通过ng配置进行识别，不支持还要请求png格式的图片，所以图片还是尽可能的做压缩处理，减小体积）

4.开启gzip

安装compression-webpack-plugin插件

参考

webpack 解决app.js文件过大问题（初始化）_app.js太大_新时代农民工官方认证码农--菜鸭子毛毛~的博客-CSDN博客

其它

cls方案

webpack打包方案

cdn替换

template替换div

异步加载组件

雪碧图，图片懒加载

业务逻辑中的接口依赖关系是否可并发