专栏首页普通程序员我是如何用 Webpack 虐待代码尺寸的 (第一回合)

我是如何用 Webpack 虐待代码尺寸的 (第一回合)

在说压缩之前,先说一下这个项目。这是一个手机 WAP版的 IM 在线客服页面,如图

大概特点呢,首先是个单页,然后是基于 WebSocket 纯前端渲染,再然后呢,就是这上面要附加的功能很多,也就是意味着代码量会很大。

如何在功能不断累加下还能保持较小的代码体积,就成为了一样重要而持续的工作了。

初始版 -- 刚刚接手666K

代码尺寸(gzip 后):666K

webpack 版本: 2.7.0

webpack 配置代码就不贴上来了,因为封装过,而且都是很基础的 loader 和plugin,为了功能而加的,后面优化增加的部分再贴。

分析

第一次看到这个结果我也是一惊,其实这一版功能都比较基础,发发文字、表情、图片,都是一些简单的聊天必备的东西,居然有这么大的尺寸,肯定是有巨大浪费。

看一看根据webpack-bundle-analyzer生成的图, 顺便安利一下, 利用这个插件可以生成目标代码中所有依赖模块的尺寸, 并且通过图形直观展示出来, 图中文件的面积可以反映出文件的尺寸。

首先看到最大的两块区域

lodash 在是个很好用的工具, 但是完整的代码尺寸很大, 代码中只用到了部分工具方法, 却把整个包引入进去, 着实不划算

然后是index.vue

很难想象一个 vue 文件居然能有这么大, 出于好(ZHEN)奇(JING)观察了一下代码, 找出了一些神奇的代码

图片写成base64 放到了 css里

感受一下原图片的尺寸

26张图片, 每一张平均在20K 左右, 然后转成 base64

此时我的心中无数......奔腾而过~~~~

PS: 查看的过程中还无意中发现代码没有压缩...(会被吐槽死吧)

压缩666K -> 423K

增加压缩, 最简单的方式就是在 webpack 命令上加参数 -p。这个成果还是很大的

uglify 对于js 代码压缩的效果还是很强的

lodash 在这个版本没有进行优化, 是因为做了一次重构, 包括通讯 SDK代码重写, 以及项目构建的改造。

这一章就先水过去了, 听说一篇文章不宜过长

下一章介绍重构后的项目

本文分享自微信公众号 - 普通程序员(farmerbrag),作者:徐健

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JWT技术解决IM系统的认证痛点

    瓜子有统一登录认证系统SSO,IM长连接通道也利用这个系统做安全认证,结构如下图。

    普通程序员
  • 分布式锁是怎么回事

    之前做微信钱包的项目,许多功能都需要与腾讯微信的前台(App)或后台交互,微信需要一个access_token凭证用于身份验证。

    普通程序员
  • 我是如何用 Webpack 虐待代码尺寸的 (第二回合)

    base64 从 css 中去掉, 直接使用外部文件, 因为本身这些文件只是一些表情, 显示的时候现加载影响也不大。

    普通程序员
  • 高通股价1小时暴涨23%的背后,除了5G芯片还有什么值得关注

    上周,苹果和高通联合发布声明,放弃在全球层面的所有法律诉讼,签署至少六年的专利许可协议和多年的芯片组供应协议。声明发出后1小时,高通股票暴涨23%收盘。高通股票...

    大数据文摘
  • UWP 手绘视频创作工具技术分享系列 - 有 AI 的手绘视频

    AI(Artificial Intelligence)正在不断的改变着各个行业的形态和人们的生活方式,图像识别、语音识别、自然语言理解等 AI 技术正在自动驾驶...

    Shao Meng
  • 关于Rollup那些事

    下一代打包工具,这是rollup对自己的定位。如今的前端领域,构建工具并不缺少,每个前端工程师都用过或者听过webpack。可以看到的是像React、Vue等框...

    腾讯IVWEB团队
  • 腾讯优图·AI 开放平台全面升级:AI 能力最全面的平台

    现阶段发展来看,智能化是未来信息技术的发展趋势,人工智能技术也为基于互联网和移动互联网等领域的创新应用提供理论基础。腾讯优图也在用自己的方式——“开放”努力着。

    优图实验室
  • 离写出大师级代码只差这一步

    离写出大师级代码只差这一步 大师级代码简单的说就是写得流畅,看的舒服,就像《海上钢琴师》影片里的1900弹奏钢琴一样。没看过的可以下着看一下非常经典。如果写代...

    阿新
  • 充斥着AI生成内容的世界,你能辨别虚拟与现实吗?

    在1972年的小说《复制娇妻》中,人们对外形相似但举止怪异的机器人“娇妻”产生了本能的厌恶。而到了2016年,美剧《西部世界》中的人类却情不自禁地爱上外表与人无...

    企鹅号小编
  • 持续集成利器,GitHub Actions

    GitHub Actions 是 GitHub 推出的持续集成服务,于 2018 年 10 月推出,目前已经可以投入到正式环境中使用。

    灵魂画师牧码

扫码关注云+社区

领取腾讯云代金券