Vue.js项目性能优化和开启Gzip压缩

4,807 阅读3分钟

打包vue的项目部署到服务器下时,发现初次加载特别的缓慢,将近10s页面才加载出来,完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大,一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案。 

1.去掉编译文件中map文件。 在编译好后,我们会看到文件夹下有特别多的.map文件,这些文件主要是帮助我们线上调试代码,查看样式。所以为了避免部署包过大,通常都不需要生成这些文件。 

在 config/index.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件。  

2.vue-router 路由懒加载 懒加载即组件的延迟加载,通常vue的页面在运行后进入都会有一个默认的页面,而其他页面只有在点击后才需要加载出来。使用懒加载可以将页面中的资源划分为多份,从而减少第一次加载的时候耗时。 

懒加载路由配置:


非懒加载路由配置:


如下图所示为通过懒加载后打包的js文件。而非懒加载的打包后一般只有一个
app.js文件。


3.使用CDN加载 

在打包后发现vendor.js 文件占用内存特别大,这里面主要是使用的一些第三方库,例如 vuex,vue-router,axios,elementUI 等文件 

我们除了在使用过程中单个组件引用,还可以使用CDN 加载。 

通过在index.html 中直接引入第三方资源来缓解我们服务器的压力,其原理是将我们的压力分给了其他服务器站点。  

4.使用gzip压缩 

在vue项目中安装依赖并将productionGzip改为true,开启Gzip压缩:npm install --save-dev compression-webpack-plugin




运行npm run build打包项目,这时可能会报错,提示ValidationError: Compression Plugin Invalid Options。根据官网提示,需要将CompressionWebpackPlugin的设置由asset改为
filename。



再次运行npm run build打包项目,这时可能会继续报错,提示TypeError: Cannot readproperty 'emit' of undefined。据我查证,是安装的compression-webpack-plugin依赖有问题,需要卸载compression-webpack-plugin更改安装低版本
v1.12。

卸载当前安装的npm uninstall --save-dev compression-webpack-plugin

安装低版本npm install --save-dev compression-webpack-plugin@1.1.2

再次运行npm run build打包项目,这时将正常包vue项目,愉快地将vue开发上线了。



开启nginx服务端gzip性能优化。找到nginx配置文件在http配置里面添加如下代码,然后重启nginx服务即可。

http:{ gzip on; gzip_static on;gzip_buffers 4 16k;gzip_comp_level 5;gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg   image/gif image/png;}

本人创业团队产品MadPecker,主要做BUG管理、测试管理、应用分发
网址:www.madpecker.com,有需要的朋友欢迎试用、体验!
本文为MadPecker团队技术人员编写,转载请标明出处