这一章讲打包体积优化，这个也算是最重要的一章了，我之前可是花了很多时间去查资料怎么优化打包体积的，不同版本的webpack之间还有一些区别，所以也算踩了很多的坑，所以这一章会比较长。 可以清晰的看到antd和react-dom就占了一半多，下面来优化。 1. 修改mode 2.…

最近前端面试被考webpack优化的应该不少，无疑webpack的优化是我们前端必须掌握的知识点之一，所以该文从打包速度分析，打包优化入手。webpack的基础用法就不举例了，直接走一波好吧。 看完打包速度，还要看下模块的大小。安装插件webpack-bundle-analyz…

● vendor.js为整个工程依赖的基础包，工程依赖不会经常变动，所以不需要每次都重新加载，需要生成稳定的chunkId和moduleId，并且搭配http响应头ETag实现协商缓存。 ● 异步chunk的依赖并不会打包到vendor.js，如果需要可以将依赖在webpack…

前端的打包工具从之前的browserify、grunt、gulp到现如今的rollup、webpack，涌现出了很多优秀的打包工具，而目前最火的无疑是webpack，无论是当前热门的框架还是工具库很多都选择了它作为打包工具，因此在开发中webpack作为打包工具是一个很好的选择…

Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。 配合无痕模式，可以避免chrome插件的影响。 1. 录制查看 下面部分是网页快照，浏览器按照一定时间间隔截取。 2. 实时查看 Paint Flashing 高亮显示网页中需要被…

一个顺手的代理工具，可以让我们随心所欲的掌控我们的开发环境，当前环境前置服务挂了还要等重启？不！直接切一个可用环境接着我的开发。验证页面不同数据状态的流程还要造数据？不！直接代理修改数据走流程，省劲。特定机型线上问题抓耳挠腮不知如何定位？代理连上查看元素、远程 log 轻松定位…