![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue项目优化
echo忘川
有问题可联系QQ:806020881
展开
-
vue项目优化目录
vue项目的优化小记:网上一番搜索,发现优化点主要在如下几个方面:一、开启gzip压缩功能二、引入CDN三、路由懒加载四、某些第三方组件按需加载而不是全部加载五、较小的图片资源用base64嵌入src中,减少http请求...原创 2020-10-21 11:30:04 · 219 阅读 · 0 评论 -
cdn优化
文章目录一、修改index.html二、修改vue.config.js配置文件优化前后效果对比图:从图片中可以看出,打包后的文件在压缩后的情况下,还少了300多k,在网速没有影响的情况下,首屏的加载速度进一步提升。cdn优化前:cdn优化后:可以通过对比看出来,事实上速度并没有很大的提升,这可能与当前的网络环境有关。一、修改index.htmlCDN(内容分发网络),是一种公共服务,他本身有很多台位于不同地域、接入不同运营商的服务器,而所谓的使用CDN实质上就是让CDN作为网站的门面原创 2020-10-21 11:25:09 · 1440 阅读 · 0 评论 -
compression-webpack-plugin首屏加载优化
文章目录一、插件打包.gz文件二、nginx配置优化前后效果对比图:从图片中可以看出,首屏的加载时间提升了很多,从5.55s提升到了578ms,这个优化是两方面的,前端将文件打包成.gz文件,然后通过nginx的配置,让浏览器直接解析.gz文件。一、插件打包.gz文件1.安装:npm install --save-dev compression-webpack-plugin或者yarn add compression-webpack-plugin --save-dev2.在vue.c原创 2020-10-19 10:00:57 · 5985 阅读 · 2 评论 -
性能分析webpack-bundle-analyzer及其优化打包
文章目录一、webpack-bundle-analyzer二、进行优化一、webpack-bundle-analyzer通过使用webpack-bundle-analyzer可以看到项目各模块的大小,可以按需优化。1.安装npm install --save-dev webpack-bundle-analyzer2.在webpack.config.js中配置:const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').Bund原创 2020-08-13 15:44:20 · 8403 阅读 · 3 评论