一次Code Review

起因

最近后端的事情比较多,所以微信个人版这个项目就丢给了前端小王子做了。
首先,说一下前端的技术选型,我既没有用React也没有用Vue更不会用Angular。我选择了Mithril。这个是一个很酷的前端框架,因为它只有8kb,自带了Router, Ajax库,而且使用起来非常大的顺手。
下班之前和一个老前辈聊了一下Mithril,当我说我打包出来有700多kb的时候,他很费解,于是我也很费解。

优化

遇到问题的时候,首先需要分析问题,知乎名言,先问是不是,再问为什么。在这里我还是要把这篇文章贴出来提问的智慧,我觉得作为一个程序员,首先要会问问题!!!

首先我检查了一下源代码,我问小王子,为什么代码这么大,他回答我说他把Privacy和Service的内容都写在了页面里面。所以我不检查代码之后,代码就是瞎写。晚饭前,把文档都转换成HTML格式之后都丢到了七牛上面,这样我就只需要载入一个链接,就可以请求到我需要的内容。

const m = require('mithril')
const cm = require('./cm')

var service = {
    html: "",
    loadData: function() {
        return m.request({
            method: "GET",
            url: 'http://xxxxxxxx.bkt.clouddn.com/service.html',
            deserialize: function(value) {return value}
        }).then(function(data) {
            service.html = `${data}`
        })
    }
}
module.exports = {
    oninit: function() {
        service.loadData()
    },
    view: function() {
        return m('#page-content-wrapper.p-15', [
            m(cm.Hamburger),
            m("div", m.trust(service.html))
        ])
    }
}

把Privacy和Service两个页面都改成用网络请求的方式加载时候打包出来的size是500多kb,还不够小。我又检查了一遍代码,手机绑定的时候Modal里面的Privacy和Service也是写页面上了,WTF。
好,这次我只要稍微改一下这个方法,就可以放在这个Modal里面请求了。Piece of cake。
这样完了,我记得打包下来的大小是458kb。

接下来我以为是Webpack的optimisze level的问题,于是我读了一遍文档,发现webpack -p本身就会默认的执行一系列的优化。于是这个就不是Webpack的问题。

在Gitter上面我问了一下

对话

以上便是对话,所以我发现moment js这个package占了200kb的时候就惊呆了,而且它在iPhone微信的浏览器里面并不能正常使用,会显示invalid date。而且目前项目中并没有用到momentjs的地方,这个是我之前留下的坑,不过已经关小黑屋了。

结语

早上在知乎上看到一个问题,成为一个优秀的程序员很难吗。
这个其实并不是只是程序员的问题,每个人感觉每天都在机械的重复的时候,上班,下班,睡觉。你肯定也曾反思,人生要怎么活的精彩活得开心。当然你会意识到这个问题,但是你还是会继续骗自己。
所以一个优秀的程序员和一个普通的程序员之前的差别就是行动。优秀的程序员是懒惰的,懒惰并不是意味着他们什么都不做,而是他们憎恨重复做一件事情,这个很Stupid。但是普通的程序员依旧只是一把梭,复制,粘贴,拿起键盘就是干。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,834评论 1 32
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 10,684评论 4 31
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 5,682评论 0 1
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 7,380评论 0 7
  • 通过这个简单的文章方便大家转发给有需要的人。以便节省时间。
    aventin阅读 2,515评论 0 1