Brady

> * 苏格团队 > * 作者：Brady # 背景 随着业务的发展，自然地会有一些公共的业务被抽离成为公共组件共各个项目使用。但是由于各个项目用到的技术栈都有所不同，所以这个公共组件就不能方便地被引用了。为解决这个问题，我们把这个组件写成了单独的页面挂到一个域名下，其他项目采用iframe或者webview的方式去加载这个页面，从而实现功能的简单复用。 不过这过程中也产生了很多问题，单是跨域就会出现好几次了。以下我将会介绍我遇到的跨域问题以及一些解决方法。 # 为什么会跨域 为了保证用户信息的安全，95年的时候Netscape公司引进了同源策略，里面的同源指的是三个相同：协议、域名、端口。 违反了同源策略就会出现跨域问题，主要表现为以下三方面： * 无法读取cookie、localStorage、indexDB * DOM无法获得 * ajax请求无法发送 # 场景 最近在做一个需求，需要用iframe引入一个别人封装好的类似视频播放器的东西。iframe里面有一个全屏的按钮，点击后需要页面让iframe全屏，由于受到同源策略的限制，iframe无法告诉页面全屏。 # 解决办法 ## 设置domain document.domain作用是获取/设置当前文档的原始域部分，同源策略会判断两个文档的原始域是否相同来判断是否跨域。这意味着只要把这个值设置成一样就可以解决跨域问题了。 在此我将domain设置为一级域名的值，a页面url为a.demo.com，a页面中iframe引用的b页面url为b.demo.com，具体设置为 ```...

最近开发的时候遇到一个问题：当项目越来越大的时候，webpack构建和编译的速度变得很慢。尽管webpack4官方宣称速度提高了90%以上，但实际使用的时候感觉速度和webpack2也差不多。我实在受不了热加载的时候要等几秒才能编译好，于是就开始了优化之路。 最终优化的效果不错，提速达到了80%以上。一路上按着以前做实验的思维去优化，经历了各种问题，相比于分享解决问题的方法，我反而更想分享下解决问题的思路。 ## 先量化目标 一般做实验之前，我们都要先定一个目标。 但是问题来了，虽然感觉很慢，但我不知道具体花了多少时间，慢是慢在哪里，所以也没办法知道我们可以优化到什么程度，优化也无从下手了。 于是首要的任务就是获得webpack编译过程的信息。 在webpack的官方文档中找了一大圈后，发现了配置中devServer.stats属性可以获得编译过程的完整信息 ``` stats: { timings: true, modules: false, assets: false, entrypoints: false, assetsSort: 'field', builtAt: false, cached: false, cachedAssets: false, children: false, chunks:...

> * 苏格团队 > * 作者：Brady ## 背景 最近团队内部需要用到一个小程序，主要功能简单概括是团队成员之间可以相互发送评价，并能够查看自己收到和发出的评价以及团队中各成员收到的评价数量。 开发人员一开始是只有我一个人，之前并没有过开发小程序的经验。于是就毅然开始了小程序开发的踩坑之路。 ## 技术选型 技术选型包括前端框架以及服务端语言及数据库的选型。 **前端技术选型：** 在前端方面，希望能够达到的目标是： * 工程化、组件化 * 有好用的ui库 * 有良好的社区维护，比较少bug * 文档健全，容易上手的 目前流行的小程序框架主要有三款，分别是**WePy、mpvue、Taro**。 根据上述的目标来筛选的话，基本上这三款都是符合要求的。前两款的代码风格都是类似于vue，第三款是类似react的语法，并且可以将一份代码转换为h5、RN、支付宝小程序等。由于本人所在公司用的技术栈主要为react，为了减少学习成本和后期换人开发维护的成本，最终选择taro作为前端的框架。 **服务端技术选型：** 在服务端方面，由于我只会用nodejs和mongodb，所以选择不多。打开小程序的开发者了解到有提供云开发的功能，那就在这两种方案之中挑一个了。 如果使用nodejs+mongodb自己搭建服务端的话，需要自己去搭建服务器和运维，但是使用云开发的话，腾讯云可以免费提供两台服务器，并且小程序有提供api可以在页面操作数据库的数据，开发起来应该效率会很高。 考虑到需要开发的小程序并不复杂而且用户量只是部门内的几十个人，所以先选择云开发把小程序做出来再说。 ##...