SPA单页面应用首屏加载速度慢解决方案

前端开发过程会遇到首屏页面加载缓慢的情况,
以下给出几种了解决方案:

1、减少入口文件体积
常用的手段是路由懒加载,只有在解析路由时才会加载组件

const routes = [
{
	path: 'blogs',
	name: 'blogsName',
	component: () => import('./components/BlogsName.js')
}

2、静态资源本地缓存
后端返回资源: 采用HTTP缓存
前端合理利用:localStorage
CDN静态资源缓存 react, react-dom, react-router-dom, axios

3、UI框架按需加载
在日常使用的UI框架,例如element-UI, antd, 我们要按需引入
import { Button } from ‘antd’

4、避免组件重复打包
假如A.js 文件是一个常用的库,现在有多个路由使用A.js文件,这样就造成重复下载
解决方案:在webpack的config文件中,修改CommonsChunkPlugin的配置minChunks:2,
minChunks为2会把使用2次及以上的包抽离出来,放进公共依赖文件中避免了重复加载组件。

5、图片资源压缩
图片资源虽然不在编码过程中,但它却是对页面性能影响最大的因素
对于所有的图片资源,我们可以进行适当的压缩
对于页面上使用的icon,可以使用在线字体图标,或者雪碧图,将众多的小图标合并到一张图中,用以减轻http请求的压力

6、开启GZip压缩
拆完包后,我们再用gzip做一下压缩,安装compression-webpack-plugin
webpack中配置安装

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productGzipExtensions = ['js', 'css']
// 配置compression-webpack-plugin压缩
new CompressionWebpackPlugin({
	algorithm: 'gzip',
	test: 'new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$')',
	threshold: 10240,
	minRation: 0.8
})

你可能感兴趣的:(前端,webpack)