起因
最近后端的事情比较多,所以微信个人版这个项目就丢给了前端小王子做了。
首先,说一下前端的技术选型,我既没有用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。但是普通的程序员依旧只是一把梭,复制,粘贴,拿起键盘就是干。