Amadeus's Blog

Thoughs, ideas and stories

前端的babel优化法

发现系统问题 优化protobuf生成的js 使用babel修改protobuf产出文件 删除部分js代码 替换部分js代码 总结 大前端的时代,前端的重要性已经已经无可置疑。在某些情况下,前端甚至决定了产品的成败。体验优良,性能卓越的前端产品留得住用户,体验糟糕的前端即使后端能力再优秀,最后也难逃被用户卸载的命运。 为了追求前端的性能,前端需要对构建出来的js负责,确保发送给用户的js没有一行多余。这样才能确保最快的加载时间。但是,这个目标通常是比较难做到的。其中一个原因是程序员对webpack构建出来的js都包含什么不是十分清晰;另外一个原因是:大部分项目用了很多轮子(npm包),以确保项目可以按时上线。这些轮子虽然可以使用,但是代码不一定是精简的,我们又对这些代码没有控制能力。即使有些冗余,很多人也都只是忍了。 这里以我们的项目为例介绍我们是如何解决这两个问题的。 发现系统问题 首先,我们需要分析一下我们的项目都用了哪些库,打包出来都多大。 我们用了一个工具webpack-bundle-analyzer。 npm install过后,把这个插件告诉webpack。这样webpack打包的时候webpack-bundle-analyzer就能对打包的文件进行统计。 // webpack.config.js const

  • Amadeus
    Amadeus

你的js速度还可以快一倍以上

对,您没看错,速度杠杠的,秒杀任何前端技术,这就是webassembly(wasm)。 Webassembly是浏览器的字节码技术。这项技术使原生代码C/C++/Rust可以编译为wasm,并运行于浏览器上。相比原生开发,它跨平台,安全;相比js,它拥有显著的性能优势。 废话少说,直接看demo。 这是我机器上跑的几个简单的算法做的测试,我的天,这可不止一倍啊。(两种实现保证完全一致,代码可以到这里围观) 温馨提示:demo移动端暂时打不开,性能测试需要很多内存呢,你的小手机吃不消吧... 这么🐂x的技术,怎么快速上手呢?我们接下来试一试。 安装依赖💾 Rust wasm-pack nodejs (这个你应该已经有了吧。。。) 快速起步🚀 npm init rust-webpack my-app cd my-app npm

  • Amadeus
    Amadeus
flutter

Flutter中的数据传递:InheritedWidget, InheritedModel

Flutter中标准的数据传递方法是通过属性传递,类似于react中的props。对于复杂点的UI,这样有时候会比较繁琐。一个属性可能需要跨越很多层传递给子子组件。 对于跨层传递,flutter原生支持如下两种方案:InheritedWidget和InheritedModel。 InheritedWidget有些Flutter使用经验的开发同学,可能比较熟悉这样的代码。 通过Theme访问当前的界面风格:Theme.of(context).primaryColor 通过MediaQuery访问屏幕大小:MediaQuery.of(context).size 这两个类都是通过InheritedWidget实现的典范。调用组件可以通过Theme.of方法找到上层最近的Theme父组件,跨层获取到其属性,同时会建立调用组件和上层组件的观察者关系。当上层组件属性修改的时候,触发调用组件的更新。 我们通过下面简单的计数器例子,演示下InheritedWidget如何用。如下两个类:InheritedContainer包含了状态计数num属性,Counter通过inheritFromWidgetOfExactType方法找到上层的InheritedContainer组件,并获取计数num并展示在一个按钮里面。 class InheritedContainer extends InheritedWidget { static InheritedContainer of(BuildContext context) { return context.

  • Amadeus
    Amadeus
Flutter轻松入手
flutter

Flutter轻松入手

Flutter是Google推出的移动端跨平台开发技术。比起大家比较熟悉的原生开发,RN, weex等技术栈,它有以下优势: 编译为原生ARM机器代码,执行效率更高。 建立在一套声明式API之上,app逻辑更容易理解。(类似于react的setState/build/diff/render的机制,老一代传统UI是命令式API) 底层架构在skia绘图层之上,抛弃了OEM widget,因此跨平台行为一致,少有兼容性bug。 开发效率高。 使用flutter技术可以提升终端开发效率,得益于它的以下几个特性: 1. hot reload(热更新)能获得更快的界面反馈,不用坐等编译 2. Android

  • Amadeus
    Amadeus
Rust概述
rust

Rust概述

Rust是Mozilla公司发起的一个开源项目。它注重安全、性能和并发,是一种系统级编程语言。Rust是针对多核体系提出的语言,并且吸收一些其他动态语言的重要特性,比如不需要管理内存,比如不会出现Null指针等等。相比C/C++这些底层语言,rust不但具备底层控制力,且具有良好的高级语言特性,生态系统。Rust一经诞生就被运用于servo浏览器内核项目开发,具备实战经历。 首先,在学习rust之前要有这样的预期:rust不是python,不要期望一个星期迅速掌握。 然而,掌握之后好比光剑在手,可以尽情释放原力。 近期学习rust,是因为rust是支持webassembly的第二个语言,且性能强悍。 安装 & 升级 安装:

  • Amadeus
    Amadeus