作者|Jeremy Wagner译者|薛命灯 现代 Web 应用程序可能会变得非常巨大,特别是它们的 JavaScript 部分.HTTP Archive 网站的数据显示,截至 2018 年中,传输到移动设备上的 JavaScript 文件中值大约为 350 KB.而这只是传输大小,JavaScript 在通过网络传输时通常会被压缩,也就是说,在浏览器端解压后,JavaScript 的实际数量会更多. 从资源处理方面来看,压缩并不会给资源处理带来任何好处,比如 900 KB 的 JavaScri

1. 最近工作上用到Angular,需要查阅一些英文资料,虽然英文非常烂,但是种种原因又不得不硬着头皮上,只是每次看英文都很费力,因此决定将一些比较重要的特别是需要反复阅读的资料翻译一下,以节约再次阅读的时间. 2. 另外一方面,如果只是看英文,不做笔记和记录,通常会很浮躁,很多知识点都是一知半解,因此倒不如翻译一下,以加深自己的理解(虽说是翻译,但实际上只是按照自己的理解,复述一下,因此不敢擅用直译.意译了,更加不敢说什么信雅达了). 3. 再强调一下,由于英文水平有限,错误在所难免(并非客套

配置 tsconfig.json tsconfig.json 所包含的属性并不多,只有 7 个,ms 官方也给出了它的定义文件.但看起来并不怎么舒服,这里就翻译整理一下.(若有误,还请指出) files: 数组类型,用于表示由 ts 管理的文件的具体文件路径 exclude: 数组类型,用于表示 ts 排除的文件(2.0 以上支持 Glob) include: 数组类型,用于表示 ts 管理的文件(2.0 以上) compileOnSave: 布尔类型,用于 IDE 保存时是否生成编译后的文件

移动端CSS px自动转换成rem 需要两步来实现: px2rem-loader 在构建阶段将px转换成rem lib-flexible 页面渲染时动态计算根元素的font-size值(手机淘宝开源库) 下载插件并配置: npm i px2rem-loader lib-flexible module: { rules: [ { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, "css-loader", { loader: &qu

如何消除无用代码:打包自己的私有js库:实现代码分割和动态import提升初次加载速度:配置eslint规范团队代码规范:打包异常抓捕你都get到了么? 摇树优化:Tree Shaking webpack借鉴了rollup构建工具,从2.0就实现支持tree shaking,其中,到webpack4.0后 通过开启mode:'production'即默认开启. tree shaking原理 DCE(Dead code elimination),即死码消除,编译器原理中,死码消除(Dead cod

之前讲了很多关于项目工程化.前端架构.前端构建等方面的技术,这次说说怎么写一个完美的第三方库. 1. 选择合适的规范来写代码 js 模块化的发展大致有这样一个过程 iife => commonjs/amd => es6,而在这几个规范中: iife: js 原生支持,但一般不会直接使用这种规范写代码 amd: requirejs 定义的加载规范,但随着构建工具的出现,便一般不会用这种规范写代码 commonjs: node 的模块加载规范,一般会用这种规范写 node 程序 es6: ECMA

在面试中只要说到模块化的问题,多多少少总会问到这些,umd.amd.cjs.esm,可能听过其中一个两个,或者都听说过.接下来我们先简单了解一下他们到底是什么,又有什么样的区别呢. 最开始的时候,Javascript是没有导入导出模块的这种方法,这就有一个比较头疼的问题,就是我们所有的代码都要写在一个文件里面,那可真的是又臭又长.有问题了,排查起来还特别的麻烦,定义个变量还总是出各种问题.后来,为了解决这些烦人的问题,各路大佬就推出了umd.amd.cjs.esm.cmd. 模块化的优点 实现代

本文是按着ng2官网的高级内容“Deployment”的思路整理得出的,原文虽然在angular2的中文站下挂着,截止目前却还是英文版未翻译,笔者就在这里结合自己的理解给出原文的一点点整理.这是原文地址: https://angular.cn/docs/ts/latest/guide/deployment.html 1. 最简单的发布流程 最简单指的是开发完成好一个ng2应用后,做最少的事情让用户能在自己的浏览器内访问到此应用.从这句话出发就很容易想到,如何做到“最简单”,自然就是什么都不做,把

翻译自angular.io上的关于4.0.0版本发布的文章,内容主要是介绍了4.0.0版本下的改进以及接下来还会有的其他更新,4.0.0其实已经出来好多天了,截止目前都已经到了4.0.1版本了,这也是前两日笔者一时兴起拿想ng2写个自己的新网站时安装angular时无意发现几个模板与组件声明时的错误提示变得极其精准,一看发现angular版本居然都到4.x了并且依赖里提示还要多安装一个@angular/animation的包.看来谷歌没有食言,真的可以追赶iphone的更新脚步了. angula

文章来自官网部分翻译https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced Angular5.0.0版本已经正式发布 总结一下v5.0.0带来的新变化都有哪些. 1.构建优化 5.0版本默认采用CLI构建和打包.构建优化器是包含在CLI里面的一个工具,通过对你的应用程序更加语义化的理解可以使得你的打包程序(bundle)更小.构建优化器有两个主要工作.第一,我们可以将应用程序的一部分标记为纯应用(pu

摘要: Vue 3.0预览. 原文:预计今年发布的Vue3.0到底有什么不一样的地方? 作者:小肆 微信公众号:技术放肆聊 Fundebug经授权转载,版权归原作者所有. 还有几个月距离 vue2 的首次发布就满 3 年了,而 vue 的作者尤雨溪也在去年年末发布了关于 vue3.0 的计划,如果不出意外,我们将在今年的某个时间点见证 Vue3.0 的发布,虽然前几天在<StateOfJS: 2018 年 JavaScript 生态圈趋势报告>一文中我们看到目前 Vue 的使用者比 React

如果你之前没有深入了解 Angular 依赖注入系统,那你现在可能认为 Angular 程序内的根注入器包含所有合并的服务提供商,每一个组件都有它自己的注入器,延迟加载模块有它自己的注入器. 但是,仅仅知道这些可能还不够呢? 不久前有个叫 Tree-Shakeable Tokens feature 被合并到 master 分支,如果你和我一样充满好奇心,可能也想知道这个 feature 改变了哪些东西. 所以现在去看看,可能有意外收获嗷. 注入器树(Injector Tree) 大多数开发者知道

The world's richest man, Amazon founder Jeff Bezos, and his wife MacKenzie have agreed a record-breaking divorce settlement of at least $35bn. 世界首富.亚马逊创始人杰夫-贝佐斯和妻子麦肯齐近日达成创纪录的离婚协议,前妻麦肯齐将分得至少350亿美元(约合人民币2351亿元). Ms Bezos keeps a 4% stake in the online

转载https://segmentfault.com/a/1190000011562077 Angular编译机制 前言 http://www.cnblogs.com/ztwBlog/p/6209759.html 这是我用来进行实验的代码,它是基于quickstart项目,并根据aot文档修改得到的.各位可以用它来进行探索,也可以自己基于quickstart进行修改(个人建议后者). 2018年2月17日更新:最近又做了2个小Demo用来研究Angular的编译和打包,基于Angular5,一个

一. 2.0.0 升级到 2.4 升级前: 1.确保没有使用extends关键字实现OnInit的继承,以及没有用任何的生命周期中,而是全部改用implements. 2.停止使用deep imports,这些符号不再是公共api的一部分. 3.停止使用Renderer.invokeElementMethod,因为该方法已被删除,目前没有其他的替换方案. 4.停止使用DefaultIterableDiffer,KeyValueDiffers#factories, 或 IterableDiffer

目录  一.         前言 1.1.       规范目的 1.2.       局限性 二.         文件规范 2.1.       文件结构约定 2.2.       单一职责原则 2.2.1         单一规则 2.2.2         小函数 三.         命名规范 3.1.       总体命名原则 3.2.       使用点和横杠来分隔文件名 3.3.       符号名与文件名 3.4.       服务名 3.5.       引导程序 3.6.

一:文件结构 1).单一规则:坚持每个文件只定义一样东西(例如服务或组件),考虑把文件大小限制在 400 行代码以内. 单组件文件非常容易阅读.维护,并能防止在版本控制系统里与团队冲突: 单组件文件可以防止一些隐蔽的程序缺陷,当把多个组件合写在同一个文件中时,可能造成共享变量.创建意外的闭包,或者与依赖之间产生意外耦合等情况: 单独的组件通常是该文件默认的导出,可以用路由器实现按需加载: 最关键的是,可以让代码更加可复用.更容易阅读,减少出错的可能性: 2).坚持定义简单函数,最好限制在 75

问题: 执行命令 :npm build --pord,出现以下错误: WARNING :. Ignoring. WARNING MB was exceeded by 3.73 MB. ERROR MB was exceeded by kB. 解决方案: 打开angular.json文件,找到budgets看到这段 "budgets": [ { "type": "initial", "maximumWarning": "

  思路:多配置一个main的文件,用于webpack入口使用, 然后路由的导向也应该默认指向新组件,最后通过webpack构建出一个新的独立的html文件. 缺点:生成多个html会new出多个vue实例,文件大小应该存在优化空间. *注意:以下配置建议在**master分支**中进行(sit分支也可以,但是以下配置的prod相关文件需要换成配置到dev),因为在develop分支中配置有可能导致dev环境构建的过程没有找到analysis模块而无法yarn dev在本地跑通项目,影响开发.当

[译] 尤雨溪:Vue 3.0 计划 原文:Plans for the Next Iteration of Vue.js作者:Evan You 发表时间:Sep 30, 2018译者:西楼听雨 发表时间: 2018/10/5 (转载请注明出处) 上周,在Vue.js 伦敦会议上,我对 Vue 的下一个主版本将带来的东西做了一个粗略的介绍.这篇贴文则将提供一份关于这个计划的详细介绍. 为什么要出一个新的主版本? Vue 2.0 已经发布有整整两年了(时间过得可真快啊!).在这段时期,Vue 发布了