UCloud云社区

cnio 发布于2019-05-23 16:25 / 2727人阅读

工作中一直在做一款公司内部的BI工具，将数据可视化的报表赋能给业务人员，报表配置者通过简单的拖拽操作即可生成报表。随着系统不断的完善，加上运维推广，我们积累了越来越多的用户。这时候用户体验的方方面面都体现出来了。我们也停下产品的功能迭代，将整个系统进行优化，旨在提升用户体验。以下是我对前端项目的优化总结。

Webpack 打包优化

项目中在使用的 Webpack 版本是3.x，本次优化的方案仍然是基于Webpack3.x版本的 Vue 脚手架进行优化。升级4.x在计划中。。。

之前也总结过一次 Webpack 2.x 在Vue2.x项目中的应用，提到过 Webpack 工程的一些优化方案，以下算是一个补充。

开启Gzip

尝试了下开启gzip，直接受益还是比较大的。下面是实际项目中打包结果。

Parsed的js，1.38M

Gizpped的js - 421.46K

通过数据分析，减少了**70.28%**的打包体积。

开启方式，在脚手架中修改配置文件：/config/index.js

// 生产模式
build: {
  productionGzip: true // 开启Gzip压缩
}

同时服务端 nginx 加入配置项

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 6;
gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/json;
gzip_vary on;

重启 nginx 后刷新页面，在Chrome develop tools中 Network 查看网络链接

Request Headers 中出现 Accept-Encoding: gzip 代表客户端能够理解 gzip 压缩编码方式

Response Headers 中出现 Content-Encoding 代表服务端指明以 gzip 编码方式对数据进行压缩

这一对请求头部关键字搭配出现，说明配置成功。

使用 Preload 插件

云服务器 GPU云服务器政务快车道尹世明总经理

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

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

vue中如何实现的自定义按钮

摘要：在实际开发项目中，有时我们会用到自定义按钮因为一个项目中，众多的页面，为了统一风格，我们会重复用到很多相同或相似的按钮，这时候，自定义按钮组件就派上了大用场，我们把定义好的按钮组件导出，在全局引用，就可以在其他组件随意使用啦，这样可以大幅度在实际开发项目中，有时我们会用到自定义按钮；因为一个项目中，众多的页面，为了统一风格，我们会重复用到很多相同或相似的按钮，这时候，自定义按钮组件就...

biaoxiaoduan 2019-08-23 16:29 评论0 收藏0
JavaScript代码整洁之道

摘要：代码整洁之道整洁的代码不仅仅是让人看起来舒服，更重要的是遵循一些规范能够让你的代码更容易维护，同时降低几率。另外这不是强制的代码规范，就像原文中说的，。里式替换原则父类和子类应该可以被交换使用而不会出错。注释好的代码是自解释的。 JavaScript代码整洁之道整洁的代码不仅仅是让人看起来舒服，更重要的是遵循一些规范能够让你的代码更容易维护，同时降低bug几率。原文clean-c...

liaorio 2019-08-23 16:29 评论0 收藏0
前端经典面试题总结

摘要：接着我之前写的一篇有关前端面试题的总结，分享几道比较经典的题目第一题考点作用域，运算符栗子都会进行运算，但是最后之后输出最后一个也就是那么其实就是而且是个匿名函数，也就是属于，就输出第二和第三个都是类似的，而且作用域是都是输出最后一个其实就接着我之前写的一篇有关前端面试题的总结，分享几道比较经典的题目：第一题： showImg(https://segmentfault.com/im...

BlackMass 2019-08-23 16:29 评论0 收藏0
私有云那家好-六大私有云厂商详细对比！

对比内容UCloudStackZStackVMwareQingCloud腾讯TStack华为云Stack优势总结•基于公有云自主可控•公有云架构私有化部署•轻量化/轻运维/易用性好•政府行业可复制案例轻量化 IaaS 虚拟化平台•轻量化、产品成熟度高•业内好评度高•功能丰富、交付部署快•中小企业案例多全套虚拟产品及云平台产品•完整生态链、技术成熟•比较全面且健全的渠道•产品成熟度被市场认可，市场占...

ernest.wang 2022-07-05 17:45 评论0 收藏0
cross-env使用记录

摘要：能跨平台地设置及使用环境变量让这一切变得简单，不同平台使用唯一指令，无需担心跨平台问题安装方式改写使用了环境变量的常见如在脚本多是里这么配置运行，这样便设置成功，无需担心跨平台问题关于跨平台兼容，有几点注意 cross-env能跨平台地设置及使用环境变量, cross-env让这一切变得简单，不同平台使用唯一指令，无需担心跨平台问题 1、npm安装方式 npm i --save-de...

Michael_Ding 2019-08-23 16:29 评论0 收藏0
webpack打包插件

摘要：引入的模块引入的使用将打包打包的拆分将一部分抽离出来物理地址拼接优化打包速度压缩代码，这里使用的是，同样在的里面添加 const path = require(path); //引入node的path模块const webpack = require(webpack); //引入的webpack,使用lodashconst HtmlWebpackPlugin = require(ht...

ChanceWong 2019-08-23 16:29 评论0 收藏0