*说明: 整个webpack学习系列内容, 来自于渡一教育 *
浏览器端模块化遇到的问题
- 效率问题: 精细的模块划分带来了更多的JS文件, 更多的JS文件带来了更多的请求, 降低了页面访问的效率
- 兼容性问题: 浏览器目前仅支持ES6的模块化标准, 并且还存在兼容性问题
- 工具问题: 浏览器不支持npm下载的第三方包
当开发一个具有规模的程序，你将遇到非常多的非业务问题，这些问题包括：执行效率、兼容性、代码的可维护性可扩展性、团队协作、测试等等等等，为什么这些问题在node端没有这么明显呢?
因为在node端, 运行的JS文件在本地, 可以本地读取文件, 它的效率比浏览器远程传输文件高得多.
因此, node端程序比较少直接使用webpack
根本原因
根本原因在于, 在浏览器端, 开发时态和运行时态的侧重点不一样
开发时态:
- 模块划分越细越好
- 支持多种模块化标准
- 支持npm或其他包管理器下载的模块
- 能够解决其他工程化问题
运行时态:
- 文件越少越好
- 文件体积越小越好
- 代码内容越乱越好
- 所有浏览器都要兼容
- 能够解决运行时问题, 主要是效率问题
解决办法
开发时态和运行时态差距如此巨大, 我们就需要有一个工具, 它能够将开发者在开发时态写的代码, 转换为运行时态需要的东西, 这个东西就是构建工具.
2020-01-07-05-06-11.png
常用的构建工具
- webpack
- grunt
- gulp
- browserify
- fis
- 其他
网友评论