Posts by eternalsky (15 posts)

如何 10 倍提高你的 Webpack 构建效率

0. 前言 图1:ES6 + Webpack + React + Babel webpack 是个好东西,和 NPM 搭配起来使用管理模块实在非常方便。而 Babel 更是神一般的存在,让我们在这个浏览器尚未全面普及 ES6 语法的时代可以先一步体验到新的语法带来的便利和效率上的提升。在 React 项目架构中这两个东西基本成为了标配,但 commonjs 的模块必须在使用前经过 webpack 的构建(后文称为 build)才能在浏览器端使用,而每次修改也都需要重新构建(后文称为 rebuild)才能生效,如何提高 webpack 的构建效率成为了提高开发效率的关键之一。 1. Webpack 的构建流程 在开始正式的优化之前,让我们先回顾一下 Webpack 的构建流程,有哪些关键步骤,只有了解了这些,我们才能分析出哪些地方有优化的可能性。 图2:webpack is a…

Read more

[译] Flux 概述

version 0.0.1 对于我这样的英语白痴来说想一次性看懂 Flux 在讲什么实在太难了,所以我决定把他一点一点地翻译过来,并随着我的慢慢使用逐渐改善我对他的认识,然后再慢慢改进这篇翻译。 原文:https://facebook.github.io/flux/docs/overview.html 概述 FLux 是 Facebook 用来构建客户端 web 应用的架构。它使用一种单向数据流来补足 React 的视图控件。她更像是一种模式,而非一种正式的框架。你可以立刻开始使用 Flux,不需要补充太多的代码。 Flux 应用有三个主要的部分:dispatcher(派发器)、stores 和 views(React 组件)。不要把她和 MVC(Model-View-Controller) 混为一谈。Controller 确实存在在 Flux…

Read more

sublime text 3 实用插件汇总

每次重装系统都要面临一个头疼的问题就是重装sublime里的组件,下面是博主在使用 sublime 3 的过程中感觉好用的插件合集,方便以后重装。 Package Control Pacakage Control 以前安装起来挺麻烦的,现在有了一键脚本方便很多。 在 Sublime 中按下 ctrl+~ 或者从菜单 view - show Console 调出工作台,复制如下代码完成安装。 sublime 3 import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(…

Read more

React 好文章索引

React 的概念很新,而且本身也还在变化中,因此比起其他框架,系统学习的文章比较少,博主在这里收录一些自己看到的相关好文章,以便以后学习查看。 React 入门实例教程: 阮老师这篇文章十分通俗易懂,适合用来入门。 Facebook React 和 Web Components(Polymer)对比优势和劣势: 这应该算是一篇 why React 的文章,文章讨论了开发者比较关心的一些 React 的特性,例如在 js 里写样式、虚拟 DOM 等等。 React学习笔记—UI交互: 与阮老师的 React 入门实例教程 相比,这篇文章主要讨论了 props 和 states 使用的时机。 ReactJS 中文技术站:一个翻译 React 官方文档的网站。 React.js入门教程:又一篇入门教程,…

Read more

jQuery 源码学习(二)jQuery.fn和jQuery.extend()

先贴源码,这部分源码都在factory函数体内。 var deletedIds = []; var slice = deletedIds.slice; var concat = deletedIds.concat; var push = deletedIds.push; var indexOf = deletedIds.indexOf; var class2type = {}; var toString = class2type.toString; var hasOwn = class2type.hasOwnProperty; var support = {}; var version = "1.11.1", // Define a local copy of jQuery jQuery = function( selector, context ) { // The jQuery object…

Read more