性能优化

webpack打包文件体积过大？（一个js文件）

1、异步加载模块
2、提取第三方库
3、压缩代码
4、去掉不必要的插件

如何优化webapck的构建能

1、减少代码体积：

①使用CommonschunkPlugin提取多个chunk之间的通用模块，减少总代吗体积
②把部分依赖转移到CDN上，避免每次编译都有webpack处理
③对一些组件库采用按需加载，避免无用的代码

2、减少目录检索范围

在使用loader的时候，通过定制exclude的inclu选项，减少loader遍历的目录范围，从而加快webpack的编译速度

3、减少检索路径：resolve.alias可以配置webpack模块解析的别名，对于比较深的解析路径，可以对其配置alias

把所有开发所用到的资源（img、css、js文件）都看成模块，通过loader和plugins来对资源进行处理，打包成符合生产环节部署的前端资源

移动端性能优化

首屏加载和按需加载，懒加载
资源预加载
图片压缩处理，使用base64
合理缓存DOM对象
使用touchstart代替click（click 300毫秒延迟）
利用transfrom：translateZ（0）来开启硬件GPU加速
不滥用web字体，不滥用float，减少font-size
使用事件代理，避免直接事件绑定

Vue的SPA 如何优化加载速度

减少入口文件体积
静态资源本地缓存
开启Gzip压缩
使用SSR、nuxt.js

移动端300ms延迟

由来：

300毫秒延迟解决的是双击缩放，Safari双击会把网页的比例变为原始比例，但是用户是可以双击或者是滑动屏幕的，当你点击完一次屏幕之前，浏览器并不知道你是想打开这个链接，还是双击，或者是滑动，所以就有了这300ms

解决：

1、禁止缩放，meta标签：user-scalable=no
2、fastclick.js

设计模式

观察者模式：

在软件开发设计中是一个对象（subject），维护一系列依赖他的对象（observer），当任何状态发生改变时自动通知他们。强依赖关系
简单理解：数据在发生改变时，对应 的处理函数就会自动执行。一个subject，用来维护observer，为某些事件来通知观察者

发布-订阅者模式 ： 有一个信息中介来过滤 耦合性低

它定义了一种一对多的关系，可以使多个观察者对象对一个主题对象进行监听，当这个主题对象发生改变时，依赖的所有对象都会被通知到

两者的区别：

在观察者模式中，观察者知道Subject，两者是相关联的，而发布订阅者只有通过信息代理才能进行通信
在发布订阅模式中，组件是松散耦合的。正好和观察者相反
观察者大部分是同步的，比如事件的触发，subject就会调用观察者的方法，而发布订阅者大多是异步的
观察者模式需要在单个应用程序地址空间中实现，而发布订阅者更像交叉应用模式