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

打包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团队技术人员编写，转载请标明出处