![17c39619600d2a32d53eaaca4f8e9350.png](https://i-blog.csdnimg.cn/blog_migrate/7f36ffcbf03da84687bd3d050d37cd8f.jpeg)
前端潮咖
点击上面蓝字,关注我们!
关注
关注前端潮咖,每日精选好文
作者:谁动了我的橘子
来源:https://juejin.im/post/5edf5b22e51d4578975a7024
在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。可以看个例子:
这是优化前的页面加载状态:执行npm run build
打包项目,出来的vendeor.js文件,基本都是1M以上的的巨大文件,没有用户能忍受5s以上的loading而不关闭页面的,如图所示:
![cf12188d9a7612e9bda5b9c2a184df6f.png](https://i-blog.csdnimg.cn/blog_migrate/0c843410c0462dc886c13bde89847b33.jpeg)
当项目在挂载到服务器上,平均都是10S以上加载出来,好家伙这加载时间,仿佛过了半个世纪,很烦人,心态boom, 开发者甚至都有种想砸电脑的冲动(·#*@#¥……&*)!
一、我们先来分析下前端加载速度慢原因
- 首先安装webpack的可视化资源分析工具,命令行执行:
npm i webpack-bundle-analyzer -D
- 然后在webpack的dev开发模式配置中,引入插件,代码如下:
const { BundleAnalyzerPlugin } =
- 最后命令行执行
npm run build --report
, 浏览器会自动打开分析结果,如下所示:
![3b0ca25125997dfd4a64e867e1775c0f.png](https://i-blog.csdnimg.cn/blog_migrate/f88e79b06927f08d70e8fb462d6ce037.jpeg)
可以看到vue全家桶相关依赖占用了很大的空间,对webpack的构建速度和网站加载速度都会有比较大的影响。单页应用会随着项目越大,导致首屏加载速度很慢,针对目前所暴露出来的问题,有以下几种优化方案可以参考:
二、有针对性的优化方案
1. 对于第三方js库的优化,分离打包
生产环境是内网的话,就把资源放内网,通过静态文件引入,会比node_modules和外网CDN的打包加载快很多。如果有外网的话,可以通过CDN方式引入,因为不用占用访问外网的带宽,不仅可以为您节省流量,还能通过CDN加速,获得更快的访问速度。但是要注意下,如果你引用的CDN 资源存在于第三方服务器,在安全性上并不完全可控。
目前采用引入依赖包生产环境的js文件方式加载,直接通过window可以访问暴露出的全局变量,不必通过import引入,Vue.use去注册
在webpack的dev开发配置文件中, 加入如下参数,可以分离打包第三方资源包,key为依赖包名称,value是源码抛出来的全局变量。如下图所示,可以看到打包后vue相关资源包已经排除在外了。对于一些其他的工具库,尽量采用按需引入的方式。
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ELEMENT'
}
![ee1b204395a4ad2e1d40c9fc98c40647.png](https://i-blog.csdnimg.cn/blog_migrate/487709796e0466a247f385fa6a11d961.jpeg)
2. vue-router 使用懒加载
在访问到当前页面才会加载相关的资源,异步方式分模块加载文件,默认的文件名是随机的id。如果在output中配置了chunkFilename,可以在component中添加WebpackChunkName,是为了方便调试,在页面加载时候,会显示加载的对应文件名+hash值,如下图:
{
path: '/Login',
name: 'Login',
component: () = >import( /* webpackChunkName: "Login" */ '@/view/Login')
}
![4d5c66c9c05626a9892f3f46a9e715f2.png](https://i-blog.csdnimg.cn/blog_migrate/3535b0d055b20ca6334067469ffabf46.jpeg)
3. 图片资源的压缩,icon资源使用雪碧
严格说来这一步不算在编码技术范围内,但是却对页面的加载速度影响很大。对于所有的图片文件,都可以在一个叫tinypng的网站上去压缩一下。网址:tinypng.com/,对页面上使用到的icon,可以使用在线字体图标,或者雪碧图,将众多小图标合并到同一张图上,用以减轻http请求压力。然后通过操作CSS的background属性,控制背景的位置以及大小,来展示需要的部分。
4. 开启gizp压缩
gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。前端配置gzip压缩,并且服务端使用nginx开启gzip,用来减小网络传输的流量大小。
命令行执行:npm i compression-webpack-plugin -D
在webpack的dev开发配置文件中加入如下代码:
const CompressionWebpackPlugin =
启用gzip压缩打包之后,会变成下面这样,自动生成gz包。目前大部分主流浏览器客户端都是支持gzip的,就算小部分非主流浏览器不支持也不用担心,不支持gzip格式文件的会默认访问源文件的,所以不要配置清除源文件。
![aec89eddb39cdb3c8bbf29b509d0490d.png](https://i-blog.csdnimg.cn/blog_migrate/d69b54f286ac79106a9bf90e2a7a7437.jpeg)
配置好之后,打开浏览器访问线上,F12查看控制台,如果该文件资源的响应头里显示有Content-Encoding: gzip,表示浏览器支持并且启用了Gzip压缩的资源
![40060e14fd03affcceac1674a12875f1.png](https://i-blog.csdnimg.cn/blog_migrate/3416e6259efa02f3f9fdd221d6fd668b.jpeg)
5. webpack相关配置优化
- 使用uglifyjs-webpack-plugin插件代替webpack自带UglifyJsPlugin插件来压缩JS文件;生产环境关闭源码映射,一方面能减少代码包的大小,另一方面也有利于系统代码安全;清除打印日志和debugger信息;配置SplitChunks 抽取公有代码,提升你的应用的性能
- 使用mini-xss-extract-plugin提取CSS 到单独的文件, 并使用optimize-css-assets-webpack-plugin来压缩CSS文件 。
注:具体相关webpack配置请点击juejin.im/post/5d2070…查看第一篇webpack文章,注释很详细哟。
6. 前端页面代码层面的优化
- 合理使用v-if和v-show
- 合理使用watch和computed
- 使用v-for必须添加key, 最好为唯一id, 避免使用index, 且在同一个标签上,v-for不要和v-if同时使用
- 定时器的销毁。可以在beforeDestroy()生命周期内执行销毁事件;也可以使用$once这个事件侦听器,在定义定时器事件的位置来清除定时器。详细见vue官网
最终优化后的效果如下图:vendor.js文件从1M以上优化到256K左右,体积减少接近80%,排除服务器影响的因素,界面渲染速度基本都在1s左右,达到秒开效果,比之前快了太多,体验一下就上来了嘻嘻。
![c79b1a8ed9c22acb6ad7b4ae26a8e7b0.png](https://i-blog.csdnimg.cn/blog_migrate/2bdbf11cb1eb624b31c5a7dabc0754eb.jpeg)
》声明:文章著作权归作者所有,如有侵权,请联系小编删除。
关注公众号「前端潮咖」,公众号后台回复「加群」 欢迎关注讨论前端知识,每日分享最新前端文章 进入公众号阅读更多教程章节![4bf42ed70e366ea4fd8d367d562fa571.gif](https://i-blog.csdnimg.cn/blog_migrate/890b342e00e85909e263289e00c61753.gif)
![f7b76103b2d6c4c94b54f7cfba14f5f5.png](https://i-blog.csdnimg.cn/blog_migrate/d1f02308b7706c20189f0705028c7ce6.jpeg)
前端潮咖
一个专注技术学习与分享的公众号
长按识别二维码关注我们
轻点“在看”支持作者
![d6f048cd6e5f7beb12e5f69ce531fa42.png](https://i-blog.csdnimg.cn/blog_migrate/387401fbc08589aff1f2d88069c7aac2.png)