首页性能优化

也无风雨丶

已于 2024-08-31 16:49:09 修改

阅读量178

点赞数 1

文章标签：前端性能优化

于 2024-08-31 16:45:56 首次发布

本文链接：https://blog.csdn.net/foradmin/article/details/141754479

版权

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
       })
    ]
}