总结一下公司项目使用各种较新的前端技术和 Api 的一些经验。

关于 ES6:

需要注意 ES6 的一些特性和 API 是需要一个 200k 的 Polyfill 才能得到支持的,特性如 for ... of 循环,generator,API 如 Object.assign 等。我们的做法是放弃这些特性,单独引入对应 API 的 Polyfill 。

关于 Webpack:

Webpack 有一个 Code splitting 功能,墙裂推荐。Webpack 作者自己表示发明新轮子的原因就是因为其他工具没有 Code splitting 。

我们在做包体积优化这个事情的时候,看到有两个可能性:DllPlugin 和 Code splitting。严格来说,这两个方案不是解决同一件事情的,侧重点不一样。

DllPlugin 可以把依赖库和业务代码分开,这样一是能够提升编译效率,二是业务代码修改打出的包很小,每次修改,用户只需重新加载一个很小的业务代码的包。长期来看是非常省流量的做法。

Code splitting 做的事情是异步加载依赖包。有点像 RequireJS 。比如我有个页面有轮播的需求,引入了一个几十k的第三方库,而其他页面都用不到,我就可以使用 Code splitting 的特性,异步加载这个库。这样只有在用户访问特性页面才会加载这个库,否则这个流量就省了。

考虑到我们的上线并不十分频繁,DllPlugin 所带来的流量节省效果并不明显,所以我们优先引入了 Code splitting 方案。

Fetch 及 CORS: CORS 不是一个新技术,但是似乎因为兼容问题,业内用得不多,也可能是我孤陋寡闻。我们使用 CORS 的考虑是:

1: 想用 Fetch 但不想用 Fetch-jsonp 。

2: 需求都是来自移动端。

于是就上了 Fetch + CORS 的方案。这里有一个小小的注意点:当开启 CORS 发出一个非简单请求(not-so-simple request)时,浏览器会发起一次预请求(详见:http://www.ruanyifeng.com/blog/2016/04/cors.html),预请求必须是一个简单请求(simple request),这件事情非常好理解:我在发一个非简单请求之前,需要询问服务器这个非简单请求包含的特殊字段能不能发,那么一定不能在询问的时候就已经带上了这些个特殊字段,否则预请求存在的意义是什么。

还有什么想到了再补充吧。。

时间: 2024-11-25 23:46:17

总结一下公司项目使用各种较新的前端技术和 Api 的一些经验。的相关文章

Git,SVN的优缺点及适合的范围,开源项目?公司项目?

使用git不久,粗浅理解: 1)适用对象不同.Git适用于参与开源项目的开发者.他们由于水平高,更在乎的是效率而不是易用性.Svn则不同,它适合普通的公司开发团队.使用起来更加容易. 2)使用的场合不同.Git适用于通过Internet,有多个开发角色的单个项目开发,Svn适合企业内部由项目经理统一协调的多个并行项目的开发. 3)权限管理策略不同.Git没有严格的权限管理控制,只要有帐号,就可以导出.导入代码,甚至执行回退操作.Svn则有严格的权限管理,可以按组.按个人进行针对某个子目录的权限控

SharePoint 2010 中新建项目时显示的“新”“New”字样探讨

SharePoint 2010 中新建项目时显示的"新""New"字样探讨 在SharePoint 2010 中,当我们新建项目时,会发现新项目右上角出现"新"字样.见图: 但是请思考一下,为什么下面第二个项目不一样呢?说明"新"字样出现的时间是有限制的,如果超出了某个时间,会自动消失.你知道"新"字样会出现多久吗?一天?两天? 默认情况下,"新"字样持续2天,由days-to-show

软件公司项目经理岗位职责

原文:http://www.cnblogs.com/batman425/archive/2013/08/21/3272631.html 一.软件公司项目经理岗位职责 主要职责: 1. 计划: a)项目范围.项目质量.项目时间.项目成本的确认. b)项目过程/活动的标准化.规范化. c)根据项目范围.质量.时间与成本的综合因素的考虑,进行项目的总体规划与阶段计划. d)各项计划得到上级领导.客户方及项目组成员认可. 2. 组织: a)组织项目所需的各项资源. b)设置项目组中的各种角色,并分配好各

软件公司项目经理岗位职责(转)

一.软件公司项目经理岗位职责 主要职责: 1. 计划: a)项目范围.项目质量.项目时间.项目成本的确认. b)项目过程/活动的标准化.规范化. c)根据项目范围.质量.时间与成本的综合因素的考虑,进行项目的总体规划与阶段计划. d)各项计划得到上级领导.客户方及项目组成员认可. 2. 组织: a)组织项目所需的各项资源. b)设置项目组中的各种角色,并分配好各角色的责任与权限. c)定制项目组内外的沟通计划.(必要时可按配置管理要求写项目策划目录中的<项目沟通计划>) d)安排组内需求分析师

svn下copy项目后定位到新资源库,产生不同版本号的方法&lt;转&gt;

我和项目组的一个同事考虑是要svn创建一个新的分支,然后基于分支进行开发,但后来考虑到英文版本的项目是非分支,而是一个新项目,是不需要最终合并到master上 面的,so...我们现在需要在svn下copy项目后定位到新资源库,从而commit产生不同版本号. 下面介绍下svn下copy项目后定位到新资源库,产生不同版本号的方法: 步骤: 1.先在svn远程资源库中检出中文版本的完整项目A到eclipse的workspace中,检出的项目名称叫B(此时B项目中会存在A项目中的svn版本信息) 2

quick-cocos2d-x学习笔记【2】——项目结构分析、创建新场景

创建完一个新项目之后,我们可以简单的看一看这个项目的文件组成,有这么一个文件层次结构 几个proj.*文件夹就不用说了,是对应的平台的解决方案,res专门存放我们的游戏资源,scripts存放我们的lua代码,sources中有我们熟悉的AppDelegate类,我们主要常用的就两个文件夹,res和scripts(我这不是废话吗) 好吧,还是再打开scripts文件夹看下, 该文件下有main.lua,它是程序lua脚本的启动文件 function __G__TRACKBACK__(errorM

iOS开发 - 公司项目中一个类似淘宝的商品属性选择页的实现

废话不多说,有一点:( 这里公司项目 本来是用button通过计算宽度来实现,但是当标签过多时,大量的button会影响效率,正解还是乖乖使用collectionview实现 )直接上效果图: 代码在我的github:https://github.com/caijunrong/CommodityTagView.git

JQuery复制内容到剪切板-jquery.zclip.js的使用,在公司项目中

公司项目中有一个复制粘贴的内容,也试图找其他插件但都是浏览器兼容问题,在网上找这个插件挺不错的,FLASH,兼容各个浏览器,测试时要在服务器环境下,点击参考,参考这个网址,或者搜下标题这个插件,性能不错

公司某项目前端技术积累

最佳实践 BootStrap + jquery + jquery插件 + sea.js/require.js + Grunt 前期技术选型 BootStrap + Backbone.js + require.js + jquery插件 ExtJS Angular.js BootStrap + jquery + jquery插件 前端技术选型总结: 之所以选择 BootStrap + jquery + jquery插件 的原因是因为ExtJS或Angular.js这种大而全的MVC框架,学习成本较