首页性能优化

原创已于 2024-08-31 16:49:09 修改 · 221 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #性能优化

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

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