谈谈 external 模式的打包

模块化在前端日新月异的工程化工具的推动下已经摆脱了前端模块加载器(SeaJS、RequireJS)的束缚,现在通常的方案是使用 browserify 或 webpack 来将模块化的文件打包,然后直接在浏览器端使用。

但是通常的打包策略是将整个项目打包成一个文件 bundle.js,默认情况下 bundle.js 中囊括了所有的依赖,包括第三方的从 node_modules 中加载的文件,这会造成 bundle.js 非常臃肿,而且在生产环境中不能很好的利用静态资源的缓存策略。这些打包技术在国外非常火,生产环境提供一个 bundle.js 的做法在国外的网络环境下毫无压力,但是国内的网络环境和国外的没法比,为了下载的性能还是建议分开打包。

分开打包还有一个好处就是,目前的前端开发环境现在都流行使用监测文件的变化而使用 livereload 技术,这也意味着会存在实时动态打包的需求,分开打包对于实时打包的速度有质的影响,对于基本不会变化的第三方模块没有必要每次做实时动态打包的时候都包含进去。

阅读全文 »

React 高效开发环境的搭建

前言

React 是 Facebook 开源出来的目前比较流行和热门的前端框架,因其基于组件的开发符合当下和未来的前端发展趋势。

React 还引入了 JSX 语法,对于初次接触 JSX 的人可能会感觉有点别扭,但是当你用过一遍之后就会发觉已经对其爱不释手了。不得不赞叹 Facebook 的开发者,为了能让开发更简便,而想出来的牛逼的解决方案。当你深入使用 React,你会发觉整个 React 的设计思想都是令人叹为观止的。

阅读全文 »