首页性能优化

本文主要是介绍首页性能优化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、缓存组件

<router-view v-slot="{ Component }">	<keep-alive><component :is='Component' /></keep-alive>
</router-view>

2、图片压缩

npm i image-webpack-loader

config.module.rule('img').rule(/\.(png)|(jpg)/).use('image-webpack-loader').loader("image-webpack-loader").options({bypaddOndeBug.true})

3、三方组件使用CDN

4、减少回流和重绘

5、路由懒加载、图片懒加载

6、开启gzip压缩

npm i compression-webpack-plugin

const CompressionWebpackPlugin = require('compression-webpack-plugin')configureWebpack:{plugins:[new CompressionWebpackPlugin({algrithm:"gzip",test:/\.(js)|(html)$/,minRatio:1})]
}

这篇关于首页性能优化的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---