浏览器端的模块化
问题：
效率问题：精细的模块划分带来了更多的 JS 文件，更多的 JS 文件带来了更多的请求，降低了页面访问效率；兼容性问题：浏览器目前仅支持 ES6 的模块化标准，并且还存在兼容性问题；工具问题：浏览器不支持 npm 下载的第三方包；这些仅仅是前端工程化的一个缩影：
- 当开发一个具有规模的程序，将遇到非常多的非业务问题，这些问题包括：执行效率、兼容性、代码的可维护性、可扩展性、团队协作、测试 等等，这些问题 称之为工程问题；
- 工程问题与业务无关，但它深刻的影响到开发进度，如果没有一个好的工具解决这些问题，将使得开发进度变得极其缓慢，同时也让开发者陷入技术的泥潭；
根本原因
思考：上面提到的问题，为什么在 node 端没有那么明显，反而到了浏览器端变得如此严重呢？
- 在 node 端，运行的 JS 文件在本地，因此可以本地读取文件，它的效率比浏览器远程传输文件高的多；
- 根本原因：在浏览器端，开发时态（devtime）和运行时态（runtime）的侧重点不一样；
开发时态 devtime
模块划分越细越好；
支持多种模块化标准；
支持 npm 或其他包管理器下载的模块；
能够解决其他工程化的问题；
运行时态 runtime
文件越少越好；
文件体积越小越好；
代码内容越乱越好；
所有浏览器都要兼容；
解决办法
-
既然开发时态和运行时态面临的局面有巨大的差异，因此需要有一个工具，这个工具能够让开发者专心的在开发时态写代码，然后利用这个工具将开发时态编写的代码转换为运行时态需要的东西，这样的工具，叫做 构建工具；
![]( "构建工具")
-
这样一来，开发者就可以专注于开发时态的代码结构，而不用担心运行时态遇到的问题了；
常见的构建工具
webpack
grunt
gulp
browserify
fis
…
打赏作者
您的打赏是我前进的动力
微信
支付宝
vuex 使用
上一篇
评论
