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就会调用观察者的方法,而发布订阅者大多是异步的
观察者模式需要在单个应用程序地址空间中实现,而发布订阅者更像交叉应用模式