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