其他

使用webpack优化项目

• 对于webpack4，打包项目使用production模式，这样会自动开启代码压缩
• 使用es6模块来开启tree shaking，该技术可以移除没有使用的代码
• 优化图片，对于小图可以使用base64方式写入文件中
• 按照路由拆分代码，实现按需加载
• 给打包出来的文件名添加哈希，实现浏览器缓存文件

监控

对于代码运行错误，通常的办法是使用window.onerror拦截报错。该方法能拦截到大部分的信息报错信息，但是也有例外：

• 对于跨域的代码运行错误会显示script error，对于这种情况我们需要给script标签添加crossorigin属性
• 对于某些浏览器可能不会显示调用栈信息，这种情况可以通过arguments.callee.caller来做栈递归

对于异步代码来说，可以使用catch的方式捕获错误。比如Promise可以直接使用catch函数，async await可以使用try catch

但是要注意线上运行的代码都是压缩过的，需要在打包时生成sourceMap文件便于debug

对于捕获的错误需要上传给服务器，通常可以通过img标签的src发起一个请求