Vue如何提升首屏加载速度实例解析
在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。
这是优化前的页面加载状态:执行npm run build打包项目,出来的vendeor.js文件,基本都是1M以上的的巨大文件,没有用户能忍受5s以上的loading而不关闭页面的,如图所示:
当项目在挂载到服务器上,平均都是10S以上加载出来,好家伙这加载时间,仿佛过了半个世纪,很烦人,心态boom, 开发者甚至都有种想砸电脑的冲动(·#*@#¥……&*)!
我们先来分析下前端加载速度慢原因
1. 首先安装webpack的可视化资源分析工具,命令行执行:
npm i webpack-bundle-analyzer -D
2. 然后在webpack的dev开发模式配置中,引入插件,代码如下:
const BundleAnalyzerPlugin = require('webpack-bundle-plugin').BundleAnalyzerPlugin plugins: [ new BundleAnalyzerPlugin() ]
3. 最后命令行执行npm run build --report, 浏览器会自动打开分析结果,如下所示:
二、vue-router使用懒加载
在访问到当前页面才会加载相关的资源,异步方式分模块加载文件,默认的文件名是随机的id。如果在output中配置了chunkFilename,可以在component中添加WebpackChunkName,是为了方便调试,在页面加载时候,会显示加载的对应文件名+hash值,如下图:
{ path: '/Login', name: 'Login', component: () = >import( /* webpackChunkName: "Login" */ '@/view/Login') }
gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。前端配置gzip压缩,并且服务端使用nginx开启gzip,用来减小网络传输的流量大小。
命令行执行:npm i compression-webpack-plugin -D
在webpack的dev开发配置文件中加入如下代码:
const CompressionWebpackPlugin = require('compression-webpack-plugin') plugins: [ new CompressionWebpackPlugin()
启用gzip压缩打包之后,会变成下面这样,自动生成gz包。目前大部分主流浏览器客户端都是支持gzip的,就算小部分非主流浏览器不支持也不用担心,不支持gzip格式文件的会默认访问源文件的,所以不要配置清除源文件。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持来客网。