16 篇博文 含有标签「前端工程化」

很多项目第一次做 webpack 缓存优化，都会先把文件名改成带 hash，觉得这样浏览器就能长期缓存了。这个方向没错，但如果 chunk 划分本身不稳定、运行时代码老是跟着变化、公共依赖和业务代码混在一起，最后会发现缓存命中率并没有想象中高。

webpack 开始提示包太大以后，很多人的第一反应是“那我多写几个 import() 吧”。动态导入当然是重要工具，但如果拆分点没有顺着页面路由和功能边界走，只会把一个大包拆成很多难管理的小包，首屏和切页体验未必真的更好。

webpack 的性能优化很容易让人一上来就陷入“经验动作”：先怀疑 UI 组件库，再怀疑图片，再想办法加几个拆包配置。可如果还没看清产物里到底是什么占了体积，这些动作大多只是碰运气。真正有效的优化，通常都从一份可读的打包分析开始。

2013 年前端工程化还远没有今天这么成熟，但团队已经开始意识到：文件压缩、拼接、编译、监听这些工作，不能一直靠手工做。

Bower 刚流行起来时，很多人最兴奋的是“前端终于也能装依赖了”。但真把它放进项目以后，很快就会碰到另一个更实际的问题：第三方库装到哪里，业务代码放到哪里，Grunt 打包时又该从哪些目录取文件。

刚接触 Grunt 时，很容易因为插件多、示例多，直接把 concat、uglify、watch、cssmin 全塞进一个 default 任务里。命令虽然能跑，但过不了几天就会发现：自己已经分不清到底哪个任务给开发环境用，哪个任务给上线打包用。