vue单页面打包文件大？首次加载慢？从7.5M到1.3M蜕变

zengdongbao 发布于2019-07-25 15:07 / 3969人阅读

摘要：文件过大打包生成文件浏览器访问效果第一步开启配置完切记重启后台配置。像这样如何识别与非请求请求非请求与非在响应头中区别就是是否表明是压缩格式。在项目根目录中内找到，把改为。但是会报错，提示找不到解决方法记得带版本号

npm run build 文件过大
打包生成文件：

浏览器访问效果：

第一步：Nginx开启gzip （配置完切记重启nginx）

后台配置nginx.config。关于gzip压缩代码：

http {
　　gzip on; #开启或关闭gzip on off
　　gzip_disable "msie6"; #不使用gzip IE6
　　gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
　　gzip_buffers 4 16k; #buffer 不用修改
　　gzip_comp_level 3; #压缩级别:1-10，数字越大压缩的越好，时间也越长
　　gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型
　　gzip_vary off; #跟Squid等缓存服务有关，on的话会在Header里增加 "Vary: Accept-Encoding"
}

第二部：vue项目中config/index.js

productionGzip: true, //是否开启gizp压缩
productionGzipExtensions: ["js", "css"],

开启后cnpm run build 会生成*.gz文件。
像这样：

如何识别gzip与非gzip请求

gzip请求：

非gzip请求：

gzip与非gzip在响应头中区别就是Content-Encoding是否表明是gzip压缩格式。

　1、在项目根目录config/index.js 中 build 内找到 productionGzip: false，把 false改为true。与 productionSourceMap 刚好相反。

属性值修改后，这个时候可以执行 npm run build。但是会报错，提示找不到 " Cannot find module "compression-webpack-plugin""

解决方法：

npm install --save-dev compression-webpack-plugin@1.1.12　　　　//记得带版本号

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40609.html

m>vuem>2首页加载慢的问题

摘要：开发完了，并部署到服务器后，就遇到了一个非常明显的问题。所以可以利用按需加载来进一步缩小文件的体积。另外图片还可以去下面这个网上压缩一下经过上述的几步，首页的加载速度已经比较快了，项目经理也比较满意。初步结束了首页加载慢的问题的研究。本次开发的项目中使用了vue2.5.2和自带的vue-cli生成了前端的基本架构。随后在项目开发当中，添加了自己写的UI组件，和复杂的业务逻辑。整个项目...

canopus4u 2019-08-22 16:11 评论0 收藏0
基于m>vuem>-cli3.0构建功能完善的移动端架子

摘要：对应每一个环境可能都会有所差异，比如说服务器地址接口地址地址等等。具体的值取决于应用运行的模式。会和中的选项相符，即你的应用会部署到的基础路径。基于vue-cli3.0构建功能完善的移动端架子，主要功能包括 webpack 打包扩展 css：sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局跨域设置 eslint设置...

Loong_T 2019-08-23 17:05 评论0 收藏0
记一次m>vuem>-webpack项目优化实践【更新】

摘要：优化空间不大主要关注另外两个上面。目前为止，项目打包后的大部头就是，这个目前的优化空间较小。当然，从整体优化的大维度上来说优化的点还有很多，这个文章继续更新下去。项目现状项目是一个数据监测平台，引入了ehcart和three.js 负责项目的数据可视化；打包后，体积高达2.1M，这个体积相比于我的项目规模来说就显得稍有笨重了使用webpack-bundle-analyzer分析了...

ernest.wang 2019-08-23 15:13 评论0 收藏0
Weex系列(3) —— 单页面还是多页面

目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello World项目 Weex系列(2) —— 页面跳转和通信 Weex系列(3) —— 单页面还是多页面 [Weex系列(4) —— 老生常谈的三端统一] [Weex系列(5) —— 封装原生组件和模块] [Weex系列(6) —...

monw3c 2019-08-26 13:25 评论0 收藏0
项目经验总结

摘要：项目中前端开发问题经验总结下的安全限制问题问题描述数据看板中的数据大部分都是实时数据或前一天统计的历史数据，因此这边后端考虑采用来实时和定时推送数据来保证数据的实时性和有效性。项目中前端开发问题经验总结 ie下websocket的安全限制问题问题描述：数据看板中的数据大部分都是实时数据或前一天统计的历史数据，因此这边后端考虑采用websocket来实时和定时推送数据来保证数据的实时...

William_Sang 2019-08-23 15:56 评论0 收藏0