对于前端的学习,我们都是从原生的html、js、css写起的,还记得第一次用浏览器打开index.html页面看见hello world时的欣喜吗?可能我们都是从那一刻爱上所见即所得的前端吧~
随着基础知识的夯实,我们会投入到较大的项目开发之中去,为了获得更多工具函数、为了代码结构更有组织性等等原因,我们逐渐引入各种工具库,使用甚至开发一个框架。
当我选择了一个框架,比如流行的react,(因为我喜欢他的组件化开发、js里写HTML的语法糖),我一定需要使用webpack或者其他构建工具吗?
这个问题需要我们回到基础概念,浏览器可以运行什么代码?
答案是原生的html、js、css
下图是一个最简单的原生项目目录结构
框架、库为我们提供的很多语法糖、文件类型,是无法被浏览器直接解析运行的,所以我们需要用babel等编译器,编译为浏览器可识别的语言,用webpack等打包工具组合成最终的目录结构。
下图是一个简单的react项目构建过程。你可以看到图的左侧部分跟图一很相像。
不管我们书写的时候写的是什么类型的文件,.jsx、.scss、.less、.vue等等,最终都是要回归到第一张图简单的状态。index.html作为浏览器的入口文件,其他资源被加载进index.html之中。
而webpack、babel等就是帮助我们回到这种状态的工具。当然,webpack所提供的功能远不只有将多个文件打包成一个文件,性能较优的react的项目也不会将所有资源文件一股脑的加载进index.html。代码拆分+动态加载等功能会是进一步的优化方法。
将代码打包在一起、再拆分,看似无意义的折腾,其实是性能优化路上的不断探索。但是记得不论我们书写的语法变得多么花哨,目录结构变得多么复杂,打完包都会变回你熟悉的模样,因为浏览器只认识html、js、css哈哈哈~