前端lightHouse性能分析优化及代码覆盖率提高实践

一.lightHouse分析及覆盖率检查

首先进行lightHouse跑分

 跑分下来分数不低，但是还是有可以优化的点，再看看代码覆盖率

红色的为未使用的代码，绿色的为已使用的代码，可以看到echarts未使用的字节量高达95.9%

二.优化方式

1.webpack采用gzip压缩打包

gzip压缩前

gzip压缩后

可以看到，chunk-lib的大小由原来的1.5M变为640KB，包的体积少了一大半，大大提高页面的加载速度，废话少说，直接上代码~

npm install CompressionPlugin --save-dev

往vue.config.js/webpack.config.js中填入以下代码 

    plugins:[
    //  new unocss()，
    new CompressionPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp('\\.(' + ['html', 'js', 'css'].join('|') + ')$'),
      threshold: 10240,
      minRatio: 0.8,
        deleteOriginalAssets: false, // 删除原文件
    }),
    ]

再次执行webpack打包时，包的体积则会进行gzip打包压缩

2.对引入使用度不高的插件由全局引入改为按需引入

这样做能有效减少包数量，提高打包速度和网页的访问速度

可以看到ercharts的包消失，但是目前element的包的覆盖率还是很小，还可以继续优化

main.js

// import echarts from "echarts";

 vue文件中进行按需引入

// import echarts from 'echarts'
let echarts = require("echarts/lib/echarts");
require('echarts/theme/macarons') // echarts theme

三.总结

再次进行LightHouse跑分

可以看到分数有略微提升,除了以上优化方式，也可以根据lightHouse中Performance中给出的建议进行相对应优化，具体还是要根据自己的实际项目来