Node 全栈 阿 里里巴巴 前端技术专家 i5ting 狼叔
个 人简介 他们叫我狼叔 姓名 : 桑世 龙 部 门 : 阿 里里巴巴 大 文娱事业部 简要介绍 : 嗷呜 Node.js 布道 StuQ 明星讲师被坑的 CTO 晒娃狂魔
2017
压缩 uglifyjs, jsmin,csso 模块系统 CommonJs, AMD, ES6 Modules 依赖管理理 npm, bower 图 片压缩 imagemin 资源处理理 DataURL js 友好语 言 coffee, babel,typescript 模板引擎 模块加载器器 jade, handlebars,nunjucks require.js, jspm,sea,system.js CSS 预处理理 PostCSS less sass 构建 工具 grunt, gulp, make 模块打包器器 browserify, webpack
前端 = 钱端
目录 1. AI 时代的三端分析 2. 前端 工程化构建与 Webpack 3. 更更了了不不起的 Node.js 4. 我眼中 Node 全栈
1 AI 时代的三端分析
我在做什什么 播放器器是有前置和后置条件的, 前置是播放 页加载 方式, 后置是各种 播放接 口, 非单 一优化点 播放 页 播放 接 口 加载 方式 播放器器 ups/cdn 等
优化 无 止境 压缩 cdn 图 片切分 gzip 首屏渲染 加载顺序 减少请求 常规 优化 数据 前置 防盗链 播放 页 Player 播放接 口
分块加载技术 Bigpipe res Browser domready jquery domcomplete 布局 P1 P2 Pn 渲染模块 首屏 Server res 渲染模块完成 res.end()
PC & H5 还有前途吗? 移动互联 网时代 已死? 太远?
AI 时代已经来了了
AI 时代的前端 从单兵, 到组团 ai 三端对 齐移动端 pc pc client
从移动端的发展看未来 native < hybrid < rn/weex < h5 c/s 架构到 b/s 架构, 该对瘦客户端予以 一定的 支持
从移动端的发展看未来 重点是开发变得 无 比复杂 Here is is the advantage of of the layout of of the way Vue MVVM 编译 渲染 Runtime one two three four five
2 前端 工程化构建与 Webpack
依赖下载 下载某个库或插件 下载它的依赖, 以及依赖的依赖 无穷尽
依赖管理理 npm/bower
脚本加载 window eval iframe $.getscript()
模块系统 使 用标准的模块系统来处理理依赖和导出 每个 文件是 一个模块 使 用模块加载器器或打包器器进 行行处理理 AMD, CommonJS, ES6 Modules
CommonJS require("..."): Loads module, returns exports require("./helpers.js"):... by relative path, returns exports require("jquery"):... from dependencies manager folder exports or module.exports export object module exports require global
AMD CommonJS 中逐渐分裂出了了 AMD, 专 门 用于浏览器器的 因为浏览器器没有 io 读写 api https://github.com/amdjs/amdjs-api/wiki/amd
核 心代码 Amd cache - define - require 按需加载
以前的做法 使 用多个 <script> 标签加载 手动管理理顺序 手动管理理加载哪些
现在的做法 开发环境 产品环境 module loader module bundler 依赖管理理 模块系统 runs in the browser and loads modules when they are requested easy to use less optimized for production usage runs in preparation and bundles modules into static files needs a preparation/build step more optimized for production usage require.js r.js\browserify\ grunt/gulp systemjs webpackjspm
所有资源都是模块
Webpack 打包过程 从配置 文件 里里找到 entry point 解析模块系统 解决依赖 模块依赖处理理 ( 读取, 解析, 解决 ) 合并所有使 用的模块 合并模块系统的运 行行时环境 产 生打包后的 文件
以前的做法
浏览器器 里里解包过程 通过 <script> 加载 webpack 打包后的 文件 加载模块运 行行时环境 加载 entry point 读取依赖 解决依赖 执 行行 ( 带有依赖的 )entry point
演进过程 1. <script> 混乱加载 2. 各种模块系统标准,commonjs/amd/es6 module 3. 模块加载器器,requirejs/sea/systemjs 4. 模块打包器器,webpack/r.js/jspm/browserfy A. 合并 入 口, 对外暴暴露露的只有 entry point B. 提供浏览器器运 行行环境 ( 内置模块加载器器 ) C. 优化 (tree-shaking DCE 无 用代码移除等 )
时髦的开发 模块 1 Loaders 模块 2 合并 转换降级 优化 压缩 模块 n plugins webpack
今天的前端 你只管写就好了了 其他的 webpack 来 你能写好, 就好了了 你能写, 就好了了 你能, 就好了了 你, 就好了了
打包器器的演进 browserify commonjs 规范 webpack 1 多种模块 rollup webpack 2 利利 用 es6 模块能静态分析语法树的特性, 只将需要的代码提取出来打包, 能 大 大减 小代码体积 Parcel
前端 工程化
当下 面临的问题 开发测试成本增加 客户端性能受影响
YKit Ykit 工具? 使业务同学 专注于研发 https://ykit.ymfe.org/
YKit 工作原理理
构建优化
Webpack 本地服务
YKit 本地服务 Ykit 会根据请求的资源进 行行 入 口过滤, 仅打包 页 面所请求的资源
Webpack 本地服务
YKit 本地服务
效果对 比
压缩优化 使 用进程集群, 一个进程压缩 一个资源 防 止 Webpack 内存溢出崩溃
效果对 比
问题 你觉得, 复杂么?
3 更更了了不不起的 Node.js
一定有你不不知道的应 用场景 网站 ( 如 express/koa 等 ) im 即时聊天 (socket.io) api( 移动端,pc,h5) HTTP Proxy( 淘宝 Qunar 腾讯 百度都有 ) 前端构建 工具 (grunt/gulp/bower/webpack/fis3 ) 写操作系统 (NodeOS) 跨平台打包 工具 (PC 端的 electron nw.js, 比如钉钉 PC 客户端 微信 小程序 IDE 微信客户端, 移动的 cordova, 即 老老的 Phonegap, 还有更更加有名的 一站式开发框架 ionicframework) 命令 行行 工具 ( 比如 cordova shell.js) 反向代理理 ( 比如 anyproxy,node-http-proxy) 编辑器器 Atom VSCode 等
更更了了不不起的 Node.js 跨平台 01 前端 (web+h5) 移动端 (hybrid) PC 端 NPM 03 前端 react\vue\angular 应 用实践架构 Node 后端 02 核 心特性 Web 应 用 Api rpc 测试 部署 最佳实践 微服务 厂商 支持 04 工具 各种预编译 构建 工具 webpack/gulp 工程化, hack 技巧 npm 等
做合适的事 儿 大前端 -> Api -> oltp(node java go) -> olap(dw && bi) -> data mining -> ai 利利益与时间
贯穿开发全过程 rpc 服务
页 面即服务
npm 上 45w+ 的模块, 叫 生态
异步流程控制
学习重点