Recommend Reading

Egg + Web 自定义前端渲染

背景在 前端渲染模式 和 asset 渲染模式 章节讲到了基于 React 的前端渲染模式,但都依赖  egg-view-react-ssr 插件,那如何基于已有 egg 模板引擎 (egg-view-nunjucks 或 egg-view-ejs) + Webpack 完全自定义前端方案呢?...

Read more

Egg Webpack 内存编译热更新实现

1. 背景在用 Node.js + Webpack 构建的方式进行开发时, 我们希望能实现修改代码能实时刷新页面UI的效果. 这个特性 Webpack本身是支持的, 而且基于koa也有现成的 koa-webpack-hot-middleware 和 koa-webpack-dev-middle...

Read more

Flutter Android 混合工程实践

在 Flutter 混合工程体系 一文中,阐述了Flutter 三种开发模式,在实际业务中搭建持续集成时,我们更希望发本地开发使用混合模式,持续集成使用解耦模式, 主要是解决以下两个问题: 混合模式:开发调试方便,包括热更新, Native 与 Flutter 开发源码断点调试 解耦模式:不侵...

Read more
Egg Vue SSR 组件加载 Egg Vue SSR 组件加载
Node 端渲染提示 window/document 没有定义业务场景首先来看一个简单的 Vue 组件test.vue<template> <div> <h2>clientHeight: {{ clientHeight }} px </h2> </div> </template> <script type="text/babel"> export default...
2020-05-31 sky
Egg + Web 自定义前端渲染 Egg + Web 自定义前端渲染
背景在 前端渲染模式 和 asset 渲染模式 章节讲到了基于 React 的前端渲染模式,但都依赖  egg-view-react-ssr 插件,那如何基于已有 egg 模板引擎 (egg-view-nunjucks 或 egg-view-ejs) + Webpack 完全自定义前端方案呢?...
2020-05-31 sky
Egg SSR Webpack热更新实现 Egg SSR Webpack热更新实现
1. 背景在用 Node.js + Webpack 构建的方式进行开发时, 我们希望能实现修改代码能实时刷新页面UI的效果. 这个特性 Webpack本身是支持的, 而且基于koa也有现成的 koa-webpack-hot-middleware 和 koa-webpack-dev-middle...
2020-05-31 sky
Egg + Vue/Nunjucks渲染性能 Egg + Vue/Nunjucks渲染性能
知乎专栏:https://zhuanlan.zhihu.com/p/30683070在用Vue做服务端渲染时,大家对Vue服务端渲染的性能持怀疑态度,业界也有一些尝试,不过完整的产品项目和数据分析比较少。结合线上和本地压测,我们对 Vue 和 Nunjucks 针对模板渲染Render时间,C...
2020-05-31 sky
Webpack Babel SSR 构建优化 Webpack Babel SSR 构建优化
在进行 Egg + Vue 进行 SSR 模式开发时,运行 npm run dev  后你会看到如下界面, 启动了两个 Webpack 构建实例:Node 模式 和 Web 模式。SSR 运行需要 Webapck 单独构建 target: node   和 target: web  主要的差异...
2020-05-31 sky
Webpack 构建大小分析与优化 Webpack 构建大小分析与优化
在项目开发时, 当页面构建的文件太大, 我们可以直接通过 easywebpack-cli 提供功能进行构建大小分析通过 -s 参数启动构建大小分析工具, 支持 analyzer(webpack-bundle-analyzer) 和 stats(stats-webpack-plugin) , 默...
2020-05-31 sky
Webpack 热更新实现原理分析 Webpack 热更新实现原理分析
概述在使用 Webpack 构建开发期时,Webpack 提供热更新功能为开发带来良好的体验和开发效率。Webpack 热更新可以做到页面无刷新局部更新能力。Webpack 热更新机制相比传统的直接自动刷新浏览器,可以保持元素当前状态,特别是在编写 css 样式调整布局的时候优势明显,不用反复...
2020-05-31 sky
Webpack 4 编译内存泄漏 Webpack 4 编译内存泄漏
增加内存堆栈大小(只能缓解,不能根除) "scripts": { "dev": "node --max_old_space_size=4096 index.js" } 通过 node-heapdump 获取内存堆栈信息const f...
2020-05-31 sky
Webpack 构建流程解密 Webpack 构建流程解密
通过 Webpack 工具,可以很方便完成各种框架的构建打包支持。使用 Webpack 一段事件后,各种配置也都非常熟悉, 但只停留使用节点,对内部原理极致不是非常清新,常常带着这些疑问:Webpack 启动流程是怎么样的?Webpack 插件是怎么使用的,怎么保证调用顺序?Webpack 事件机制是怎么样的?接下来我将通过从 Webpack 启动流程, 事件机制, 插件机制, 热更新等几方面深入的讲述一下构建 Webpack 内部构建流程。启动流程首先我们来看看webpack的 webpack.js...
2020-05-31 sky
Flutter 动态更新 Flutter 动态更新
关于动态更新Google 考虑自家 Android 应用安全和苹果策略, 本来在 2019 的 roadmap 里面有这样一项,roadmap公布后,过一段时间后面又移除了这一项,目前不是主航道。 Android 目前可以通过整包方式实现动态更新, iOS 目前还不支持。Android Flu...
2020-05-31 sky
Flutter iOS 混合工程实践 Flutter iOS 混合工程实践
在 Flutter 混合工程体系 一文中,阐述了Flutter 三种开发模式,在实际业务中搭建持续集成时,我们更希望本地开发使用混合模式,持续集成使用解耦模式, 主要是解决以下两个问题: 混合模式:开发调试方便,包括热更新, Native 与 Flutter 开发源码断点调试 解耦模式:不侵入...
2020-05-31 sky
Flutter  Android  混合工程实践 Flutter Android 混合工程实践
在 Flutter 混合工程体系 一文中,阐述了Flutter 三种开发模式,在实际业务中搭建持续集成时,我们更希望发本地开发使用混合模式,持续集成使用解耦模式, 主要是解决以下两个问题: 混合模式:开发调试方便,包括热更新, Native 与 Flutter 开发源码断点调试 解耦模式:不侵...
2020-05-31 sky
Android 与 Flutter 入门开发实践指引 Android 与 Flutter 入门开发实践指引
项目集成Android 集成 Flutter 项目通过 Android Studio 创建 Andriod 原生应用 AndroidApp通过 Android Studio 创建 New Flutter Project, 选择 Flutter Module,创建 Flutter Module ...
2020-05-31 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...
2020-05-31 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...
2020-05-31 sky
React Native 自定义插件 React Native 自定义插件
原文: https://hubcarl.github.io/blog/2016/08/13/react-native-plugin/编写自定义插件需要继承ReactContextBaseJavaModule和实现ReactPackage接口, 具体实现步骤如下:1. 继承ReactContext...
2020-05-31 sky
React Native代码执行跟踪和调试 React Native代码执行跟踪和调试
原文 https://hubcarl.github.io/blog/2016/09/04/react-native-debug/在本地开发时, React Native 是加载本地Node服务, 可以通过npm start 启动, package.json 代码如下:"scripts&...
2020-05-31 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...
2020-05-31 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...
2020-05-31 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 毫秒执...
2020-05-31 sky
Hybrid系列-Cordova android框架详解 Hybrid系列-Cordova android框架详解
原文:https://hubcarl.github.io/blog/2015/04/11/hybrid-cordova/一、Cordova 核心java类说明CordovaActivity:Cordova Activity入口,已实现PluginManager、WebView的相关初始化工作, ...
2020-05-31 sky
npm 常用命令 npm 常用命令
原文: https://hubcarl.github.io/blog/2018/03/22/npm/npm 初始化 package.jsonnpm initnpm install 安装npm installnpm instal同时安装 package.json 配置 dependencies 和...
2020-05-31 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...
2020-05-31 sky
Docker 随记 Docker 随记
安装docker: Docker:https://download.docker.com/mac/stable/Docker.dmgDocker GUI: https://github.com/docker/kitematic/releasesDocker 服务管理docker run -d ...
2020-05-31 sky
Egret  游戏开发 Egret 游戏开发
命令行egret buildegret run -a 自动编译,浏览器不能自动刷新Stagepublic constructor() { super(); this.once(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this...
2020-05-31 sky
vscode 插件开发 vscode 插件开发
插件初始化安装Yeoman和VS Code脚手架npm install -g yo generator-code生成项目模版yo code插件开发https://marketplace.visualstudio.com/items?itemName=hubcarl.vscode-easy-pl...
2020-05-31 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...
2020-05-31 sky
页面资源加载 页面资源加载
首屏测试window.addEventListener('DOMContentLoaded', ()=>{ const t = window.performance.timing; console.log('first pain time[painTime-navigationStart]:', window.painTime - t.navigationStart); console.log(...
2020-05-31 sky