这篇主要是留给我自己看的，目的是，在面试过程中，遇到过几次这样的问题。“你在项目中做过什么有挑战性的（有价值的）工作”，“说一下如何行能优化”

这两个问题面试官可以一直不断的问下去。而其实我本人知道的不少，但是在面试过程中总是脑子空白。

所以写一下，就当作总结

做过的有挑战性的工作

从Taro1升级到Taro3

带来的小优化

1. 去除momentjs：从2086kb~2023kb。减少63kb代码.
2. babel-preset-env去除corejs，大约又小了十几kb
3. 通过修改urlloader，把所有图片弄到远程。代码从2002kb减少到1898kb
4. 封装跳转页面方法，并且覆盖声明文件，覆盖原代码，添加注释，提醒开发人员
5. tslint升级eslint
6. 询问试运行代码

   一像素Vue指令封装

yarn workspace重构个人项目

从零开发电商网站

从零搭建Vue开发环境

解决小程序PC端白屏的问题

1. 首先回忆、体验白屏的规律。发现比较旧的小程序可以，新的小程序白屏，且把旧小程序发布到最新版本后，也白屏。所以基本上确定是某些代码导致的。
2. 百度了解到PC版小程序内核使用的是chromium 53内核，是比较老的内核。且，开发者工具提供了预览=》自动预览=》启动PC端自动预览或真机调试=》自动真机调试=》启动PC端自动真机调试，可以本地调试代码。后来亲测，真机调试无效。只有自动预览才能模拟线上环境。
3. 用自动预览真机调试，然后发现，启动时仅在vconsole中报错unexpactive token，无法定位具体问题。真机预览则没有报错。
4. 在经过一些尝试（列举），最后用最笨的办法：二分法，用git不断reset –hard到历史版本，然后跑一遍，最终确定到指定commit。
5. 确定到指定commit后再确定是哪一段的问题。最终确定到是引入的自己公司的内部工具库然后导致了报错。
6. 修改babel，用babel再次转义node_modules里指定包，以解决此问题（具体问题看关于babel的preset-env）

无穷无尽的行能优化

• 减少http请求，webpack分包，抽离公共代码
• 静态资源使用CDN
• css放在文件头部、js放在文件底部
• 用字体图标代替图片图标
• 善用缓存
• 压缩文件：Uglifyjs、TeslerPlugin？、MiniCssExtraPlugin
• 图片延迟加载
• css3替代图片
• webpack按需加载代码
• tailwind，防止css加载太慢导致白屏
• treeShaking
• 减少重排重绘
• 使用事件委托
• 代码局部性，减少作用域链查找
• 少用if else、善用switch和查找表
• requestAnimationFrame来实现视觉变化
• 使用web Worker来进行大量计算工作
• 善用位操作
• 降低css选择器复杂性。BEM、css-modules
• 用transform、opacity
• 让dom脱离文档流（absolute、fixed）
• React\Vue数组渲染要加key