代码分割结合 Prefetch 完美优化单页应用加载性能

单页应用性能的最大痛点就是 bundle 体积大导致首屏时间过长。使用 webpack 的 code splitting(代码分割)功能可以将 bundle 分片,加速首屏,但之后的交互势必会受到影响,页面变得不再流畅,稍有卡顿,所以放弃了分片,但是现在发现有webpack插件解决JS文件后加载响应慢的问题,所以记了下来。

查看更多

分享到 评论

使用babel-preset-env替代babel-preset-es2015

Babel 是每个 FEer/Node.js 的使用者都会使用的一个代码转(bian)换(yi)器,它可以把 ES6、ES7 等语法转换成 ES5 的语法,使其能在更多环境下运行。

但是随着浏览器和 Node.js 的版本迭代,他们对新语法的支持也越来越好。但是非常尴尬的是,我们总是使用 Babel 把所有代码一股脑转换成 ES5。这意味着我们抛弃了性能优秀的 let、const 关键字,放弃了简短的代码,而选择了又长又丑像坨屎的经过变换后的代码。

即使仅仅将代码跑在对 ES5 支持度在 99% 的 Node 6,一旦使用了 import 关键字,你就得用 Babel 对代码进行转换,一般还是全部转换为 ES5,辣鸡 Node.js 竟然还不支持 import 和 export。

那有没有什么工具能智能识别当前运行环境,并且进行适当的转换,以及填充适当的 polyfill 呢?

查看更多

分享到 评论

create-react-app和express共同组建的开发环境

脚手架介绍

在这个环境下,Facebook 提供了一套不需要配置的 React 开发方案,即create-react-app。这个脚手架已经做好了基础 webpack 配置,带有自动更新,错误提示等等功能,仅仅需要创建,启动就可以快速开发。

这时也不得不提前端社区的另一个崛起者:yarn

查看更多

分享到 评论

ES7 and ES8 特性

ES8 was Released

虽然现在开发已经都在用es6,一个不注意,都到了es8了。记录一下新增加的常用功能,方便查阅。

ES7 特性:

  1. Array.prototype.includes
  2. Exponentiation Operator(求冥运算)

ES8 特性

  1. Object.values/Object.entries
  2. String padding(字符串填充)
  3. Object.getOwnPropertyDescriptors
  4. 函数参数列表和调用中的尾逗号(Trailing commas)
  5. 异步函数(Async Functions)

    查看更多

分享到 评论

Express 模板传值对象app.locals、res.locals

locals是Express应用中 Application(app)对象和Response(res)对象中的属性,该属性是一个对象。该对象的主要作用是,将值传递到所渲染的模板中。

查看更多

分享到 评论