1.去掉编译文件中map文件。 在编译好后,我们会看到文件夹下有特别多的.map文件,这些文件主要是帮助我们线上调试代码,查看样式。所以为了避免部署包过大,通常都不需要生成这些文件。
在 config/index.js 文件中将productionSourceMap 的值设置为false. 再次打包就可以看到项目文件中已经没有map文件。
2.vue-router 路由懒加载 懒加载即组件的延迟加载,通常vue的页面在运行后进入都会有一个默认的页面,而其他页面只有在点击后才需要加载出来。使用懒加载可以将页面中的资源划分为多份,从而减少第一次加载的时候耗时。
懒加载路由配置:
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 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团队技术人员编写,转载请标明出处