Easy Projects
基于 Webpack 的前端工程化构建方案
Egg Vue Server Side Render
Egg React Server Side Render
Res
Egg React Server Side Render Framework
Ves
Egg Vue Server Side Render Framework
Flutter && React Native && Weex && Hydrid
  Recommend Reading

Webpack 前端工程解决方案

easywebpack 是基于 webpack 的前端工程化解决方案。旨在解决 webpack 项目构建复杂,使用成本高,复用低,维护成本高等工程效率问题。基于 easywebpack 工程化方案, 你能非常简单容易的对各种前端项目进行工程化建设,及时享受最新的特性。

Read more

Egg Vue SSR/CSR 解决方案

Egg Vue SSR/CSR工程解决方案, 支持多种渲染模式。整个设计实现遵循插件化,可组装,可扩展,可替换思路进行设计实现,充分利用 Egg,Vue,Webpack 相关周边生态,同时又可以自由组合以及扩展;重点解决各种技术框架整合复杂性,开发流程与体验,可扩展性等工程化问题

Read more

Res - Node React Web Framework

res -- Node React Application Web Framework. 支持 React Server Side Render 和 Client Side Render; 基于 Egg 开发,遵循 Egg 开发规范和 Egg 生态,支持 Egg 所有特性,比如插件机制,多进程机制...

Read more

Ves - Node Vue Web Framework

ves 基于 Egg + Vue 的Node 应用基础框架; 支持 Vue Server Side Render 和 Client Side Render; 基于 Egg 开发,遵循 Egg 开发规范和 Egg 生态,支持 Egg 所有特性,比如插件机制,多进程机制使用 TypeScr...

Read more
页面资源加载 页面资源加载
首屏测试window.addEventListener('DOMContentLoaded', ()=>{ const t = window.performance.timing; console.log('first pain time[painTime-navigationStart]:', window.painTime - t.navigationStart); console.log(...
2018-07-10 sky
Webpack 4 编译内存泄漏 Webpack 4 编译内存泄漏
增加内存堆栈大小(只能缓解,不能根除)
2018-11-05 sky
Egg + Web 自定义前端渲染 Egg + Web 自定义前端渲染
背景在 前端渲染模式 和 asset 渲染模式 章节讲到了基于 React 的前端渲染模式,但都依赖  egg-view-react-ssr 插件,那如何基于已有 egg 模板引擎 (egg-view-nunjucks 或 egg-view-ejs) + Webpack 完全自定义前端方案呢?...
2019-07-29 sky
Egg SSR Webpack 内存编译热更新实现 Egg SSR Webpack 内存编译热更新实现
1. 背景在用 Node.js + Webpack 构建的方式进行开发时, 我们希望能实现修改代码能实时刷新页面UI的效果. 这个特性 Webpack本身是支持的, 而且基于koa也有现成的 koa-webpack-hot-middleware 和 koa-webpack-dev-middle...
2019-07-26 sky
Egret  游戏开发 Egret 游戏开发
命令行egret buildegret run -a 自动编译,浏览器不能自动刷新Stagepublic constructor() { super(); this.once(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this...
2019-01-02 sky
Docker 随记 Docker 随记
安装docker: Docker:https://download.docker.com/mac/stable/Docker.dmg Docker GUI: https://github.com/docker/kitematic/rele
2018-12-07 sky
React Native代码执行跟踪和调试 React Native代码执行跟踪和调试
原文 https://hubcarl.github.io/blog/2016/09/04/react-native-debug/在本地开发时, React Native 是加载本地Node服务, 可以通过npm start 启动, package.json 代码如下:"scripts&...
2018-12-05 sky
Webpack 构建流程解密 Webpack 构建流程解密
通过 Webpack 工具,可以很方便完成各种框架的构建打包支持。使用 Webpack 一段事件后,各种配置也都非常熟悉, 但只停留使用节点,对内部原理极致不是非常清新,常常带着这些疑问:Webpack 启动流程是怎么样的?Webpack 插件是怎么使用的,怎么保证调用顺序?Webpack 事件机制是怎么样的?接下来我将通过从 Webpack 启动流程, 事件机制, 插件机制, 热更新等几方面深入的讲述一下构建 Webpack 内部构建流程。启动流程首先我们来看看webpack的 webpack.js...
2018-07-10 sky
Vue SSR 组件加载 Vue SSR 组件加载
Node 端渲染提示 window/document 没有定义业务场景首先来看一个简单的 Vue 组件
2019-07-26 sky
Egg + Vue/Nunjucks 服务端渲染性能测试 Egg + Vue/Nunjucks 服务端渲染性能测试
知乎专栏:https://zhuanlan.zhihu.com/p/30683070在用Vue做服务端渲染时,大家对Vue服务端渲染的性能持怀疑态度,业界也有一些尝试,不过完整的产品项目和数据分析比较少。结合线上和本地压测,我们对 Vue 和 Nunjucks 针对模板渲染Render时间,C...
2019-07-26 sky
Webpack 热更新实现原理分析 Webpack 热更新实现原理分析
概述在使用 Webpack 构建开发期时,Webpack 提供热更新功能为开发带来良好的体验和开发效率。Webpack 热更新可以做到页面无刷新局部更新能力。Webpack 热更新机制相比传统的直接自动刷新浏览器,可以保持元素当前状态,特别是在编写 css 样式调整布局的时候优势明显,不用反复...
2019-07-26 sky
Flutter 动态更新 Flutter 动态更新
关于动态更新Google 考虑自家 Android 应用安全和苹果策略, 本来在 2019 的 roadmap 里面有这样一项,roadmap公布后,过一段时间后面又移除了这一项,目前不是主航道。 Android 目前可以通过整包方式实现动态更新, iOS 目前还不支持。Android Flu...
2019-07-12 sky
Android 与 Flutter 入门开发实践指引 Android 与 Flutter 入门开发实践指引
项目集成Android 集成 Flutter 项目通过 Android Studio 创建 Andriod 原生应用 AndroidApp通过 Android Studio 创建 New Flutter Project, 选择 Flutter Module,创建 Flutter Module ...
2019-07-12 sky
Flutter iOS 混合工程实践 Flutter iOS 混合工程实践
在 Flutter 混合工程体系 一文中,阐述了Flutter 三种开发模式,在实际业务中搭建持续集成时,我们更希望本地开发使用混合模式,持续集成使用解耦模式, 主要是解决以下两个问题: 混合模式:开发调试方便,包括热更新, Native 与 Flutter 开发源码断点调试 解耦模式:不侵入...
2019-07-12 sky
Flutter  Android  混合工程实践 Flutter Android 混合工程实践
在 Flutter 混合工程体系 一文中,阐述了Flutter 三种开发模式,在实际业务中搭建持续集成时,我们更希望发本地开发使用混合模式,持续集成使用解耦模式, 主要是解决以下两个问题: 混合模式:开发调试方便,包括热更新, Native 与 Flutter 开发源码断点调试 解耦模式:不侵...
2019-07-12 sky
Webpack 构建大小分析与优化 Webpack 构建大小分析与优化
在项目开发时, 当页面构建的文件太大, 我们可以直接通过 easywebpack-cli 提供功能进行构建大小分析通过 -s 参数启动构建大小分析工具, 支持 analyzer(webpack-bundle-analyzer) 和 stats(stats-webpack-plugin) , 默...
2019-06-15 sky
React Native, Hybrid App, H5 简单对比分析 React Native, Hybrid App, H5 简单对比分析
原文: https://hubcarl.github.io/blog/2016/08/07/react-native-compare/learn once write anywhereWhat we really want is the user experience of the native...
2019-02-15 sky
React Native Android APK包大小分析 React Native Android APK包大小分析
原文:https://hubcarl.github.io/blog/2016/08/21/react-native-size/React Native SO库React Native 打包后文件大小分析React Native java jar包分类和主要作用React Native 详细引用j...
2019-02-15 sky
轻轻松松搞定 Webpack 项目构建 轻轻松松搞定 Webpack 项目构建
基于 easywebpack 工程体系,你能非常简单,快速的编写出 webpack 复杂的配置,你无需过多关心热更新,是否压缩,是否Hash,公共JS/CSS,DLL,构建速度等问题,这些 easywebpack 都已经帮你解决和优化了。easywebpack 提供 Vue/React/JS/...
2019-02-14 sky
Mac PHP 环境 Mac PHP 环境
安装 PHP 5.6curl -s https://php-osx.liip.ch/install.sh | bash -s force 5.6php --ini 查看 php.ini 位置安装memcachebrew info memcachedbrew search memcachebre...
2019-01-15 sky
vscode 插件开发 vscode 插件开发
插件初始化安装Yeoman和VS Code脚手架npm install -g yo generator-code生成项目模版yo code插件开发https://marketplace.visualstudio.com/items?itemName=hubcarl.vscode-easy-pl...
2019-01-04 sky
Vue SSR 组件加载 Vue SSR 组件加载
Node 端渲染提示 window/document 没有定义业务场景首先来看一个简单的 Vue 组件
2018-04-28 sky
Git 使用技巧 Git 使用技巧
原文: https://hubcarl.github.io/blog/2017/09/23/git/Git保存用户名密码git config credential.helper storeGit分支批量清理本地分支git branch | grep -E feature\/(1\.|activi...
2019-10-18 sky
Egg 项目集成 Webpack 热更新 Egg 项目集成 Webpack 热更新
在 Egg + React 工程化解决方案 和 Egg + Vue 工程化解决方案 方案使用了 egg-webpack 实现了 Egg + easywebpack 热更新统一处理。其实 egg-webpack 是可以单独使用的,不耦合 easywebpack 构建配置。下面以 Egg + Re...
2019-07-29 sky
Egg + Webpack 自定义前端渲染 Egg + Webpack 自定义前端渲染
背景在 前端渲染模式 和 asset 渲染模式 章节讲到了基于 React 的前端渲染模式,但都依赖  egg-view-react-ssr 插件,那如何基于已有 egg 模板引擎 (egg-view-nunjucks 或 egg-view-ejs) + Webpack 完全自定义前端方案呢?...
2019-07-29 sky
Egg + Vue/Nunjucks 服务端渲染性能测试 Egg + Vue/Nunjucks 服务端渲染性能测试
知乎专栏:https://zhuanlan.zhihu.com/p/30683070在用Vue做服务端渲染时,大家对Vue服务端渲染的性能持怀疑态度,业界也有一些尝试,不过完整的产品项目和数据分析比较少。结合线上和本地压测,我们对 Vue 和 Nunjucks 针对模板渲染Render时间,C...
2019-06-27 sky
Babel 构建优化 Babel 构建优化
在进行 Egg + Vue 进行 SSR 模式开发时,运行 npm run dev  后你会看到如下界面, 启动了两个 Webpack 构建实例:Node 模式 和 Web 模式。
2019-06-15 sky
Egg SSR Webpack 内存编译热更新实现 Egg SSR Webpack 内存编译热更新实现
1. 背景在用 Node.js + Webpack 构建的方式进行开发时, 我们希望能实现修改代码能实时刷新页面UI的效果. 这个特性 Webpack本身是支持的, 而且基于koa也有现成的 koa-webpack-hot-middlewa
2019-06-15 sky
Hybrid系列-Cordova android框架详解 Hybrid系列-Cordova android框架详解
原文:https://hubcarl.github.io/blog/2015/04/11/hybrid-cordova/一、Cordova 核心java类说明CordovaActivity:Cordova Activity入口,已实现PluginManager、WebView的相关初始化工作, ...
2019-03-20 sky
Hybrid系列-phonegap android框架详解 Hybrid系列-phonegap android框架详解
原文:https://hubcarl.github.io/blog/2015/04/19/hybrid-phonegap/首先, 来看一下phonegap 初始化流程以及Native 与 JS 交互流程图。说明:socket server模式下, phonegap.js 源码实现的采用1 毫秒执...
2018-12-05 sky
React Native Android源码解读和交互原理分析 React Native Android源码解读和交互原理分析
原文:https://hubcarl.github.io/blog/2016/08/28/react-native-js/首先来看一下一张完整Native与JavaScript交互原理图:在 React Native App中,在应用启动时根据 ReactPackage 会自动生成 JavaSc...
2018-12-05 sky
React Native 热更新实现 React Native 热更新实现
原文:https://hubcarl.github.io/blog/2016/09/15/react-native-update/React Native 动态更新实际效果如下React Native 热更新实现APK我们知道, React Native所有的js文件都打包在一个jsbundle...
2018-12-05 sky
npm 常用命令 npm 常用命令
原文: https://hubcarl.github.io/blog/2018/03/22/npm/npm 初始化 package.jsonnpm initnpm install 安装npm installnpm instal同时安装 package.json 配置 dependencies 和...
2019-04-03 sky
Webpack 4 构建内存泄漏 Webpack 4 构建内存泄漏
问题:https://github.com/easy-team/easywebpack/issues/26 (已修复)一. 增加内存堆栈大小(只能缓解,不能根除)
2019-02-14 sky
React Native 自定义插件 React Native 自定义插件
原文: https://hubcarl.github.io/blog/2016/08/13/react-native-plugin/编写自定义插件需要继承ReactContextBaseJavaModule和实现ReactPackage接口, 具体实现步骤如下:1. 继承ReactContext...
2018-12-05 sky