webpack前言:前端模块系统的演进
前端开发和其他开发工作的主要区别,首先是前端是基于多语言、多层次的编码和组织工作,其次前端产品的交付是基于浏览器,这些资源是通过增量加载的方式运行到浏览器端,如何在开发环境组织好这些碎片化的代码和资源,并且保证他们在浏览器端快速、优雅的加载和更新,就需要一个模块化系统,这个理想中的模块化系统是前端工程师多年来一直探索的难题。
模块系统的演进
script 标签
<script src="module1.js"></script> <script src="module2.js"></script> <script src="module3.js"></script>
这是最原始的 JavaScript 文件加载方式,这种原始的加载方式暴露了一些显而易见的弊端:
- 文件只能按照
<script>
的书写顺序进行加载 - 在大型项目中各种资源难以管理,长期积累的问题导致代码库混乱不堪
- 全局作用域下容易造成变量冲突
CommonJS
该规范的核心思想是允许模块通过 require 方法来同步加载所要依赖的其他模块,然后通过 exports 或 module.exports 来导出需要暴露的接口
require("module"); require("../file.js"); exports.doStuff = function() {}; module.exports = someValue;
优点:
- 服务器端模块便于重用
- NPM 中已经有将近20万个可以使用模块包
- 简单并容易使用
缺点:
- 同步的模块加载方式不适合在浏览器环境中,同步意味着阻塞加载,浏览器资源是异步加载的
- 不能非阻塞的并行加载多个模块
实现:
- 服务器端的 Node.js
AMD
CommonJS是主要为了JS在后端的表现制定的,他是不适合前端的,于是乎,AMD(异步模块定义)出现了,它就主要为前端JS的表现制定规范。
AMD(Asynchronous Module Definition)就只有一个接口:define(id?,dependencies?,factory);
它要在声明模块的时候制定所有的依赖(dep),并且还要当做形参传到factory中,对于依赖的模块提前执行,依赖前置,像这样:
define(['dep1','dep2'],function(dep1,dep2){...});
要是没什么依赖,就定义简单的模块,下面这样就可以啦:
define(function(){var exports = {};exports.method = function(){...};return exports;});
优点:
- 适合在浏览器环境中异步加载模块
- 可以并行加载多个模块
缺点:
- 提高了开发成本,代码的阅读和书写比较困难,模块定义方式的语义不顺畅
实现:
- RequireJS
前端模块加载
前端期望的模块系统可以兼容多种模块风格,尽量可以利用已有的代码,不仅仅只是 JavaScript 模块化,还有 CSS、图片、字体等资源也需要模块化。
前端模块要在客户端中执行,所以他们需要增量加载到浏览器中。
模块的加载和传输,我们首先能想到两种极端的方式,
一种是每个模块文件都单独请求,另一种是把所有模块打包成一个文件然后只请求一次。
显而易见,每个模块都发起单独的请求造成了请求次数过多,导致应用启动速度慢;一次请求加载所有模块导致流量浪费、初始化过程慢。这两种方式都不是好的解决方案,它们过于简单粗暴。
分块传输,按需进行懒加载,在实际用到某些模块的时候再增量更新,才是较为合理的模块加载方案。
要实现模块的按需加载,就需要一个对整个代码库中的模块进行静态分析、编译打包的过程。
所有资源都是模块
在上面的分析过程中,我们提到的模块仅仅是指JavaScript模块文件。然而,在前端开发过程中还涉及到样式、图片、字体、HTML 模板等等众多的资源。这些资源还会以各种方言的形式存在,比如 coffeescript、 less、 sass、众多的模板库、多语言系统(i18n)等等。
如果他们都可以视作模块,并且都可以通过require的方式来加载,将带来优雅的开发体验,比如:
require("./style.css"); require("./style.less"); require("./template.jade"); require("./image.png");
静态分析
在编译的时候,要对整个代码进行静态分析,分析出各个模块的类型和它们依赖关系,然后将不同类型的模块提交给适配的加载器来处理。
比如一个用 LESS 写的样式模块,可以先用 LESS 加载器将它转成一个CSS 模块,在通过 CSS 模块把他插入到页面的 <style>
标签中执行。Webpack 就是在这样的需求中应运而生。
同时,为了能利用已经存在的各种框架、库和已经写好的文件,我们还需要一个模块加载的兼容策略,来避免重写所有的模块。
那么接下来,让我们开始 Webpack 的神奇之旅吧。
转载于:https://www.cnblogs.com/chaixiaozhi/p/8535639.html
webpack前言:前端模块系统的演进相关推荐
- 京东到家搜索系统架构演进
目录 一. 前言 二. 搜索系统架构演进 2.1 到家搜索系统1.0 基于LBS搜索召回场景 建立"可用"的搜索系统 小结 2.2 到家搜索系统2.0 重构召回 排序模型小试牛刀 ...
- 网易云音乐前端模块动态下发系统
关注 前端瓶子君,回复"加群" 加入我们一起学习,天天进步 作者:康东扬 https://zhuanlan.zhihu.com/p/91386560 本文是<滨江前端技术沙龙 ...
- 初学前端,学习路线图必不可少,更有【95页】初级前端模块笔记!
前言 在初学前端的时候,我们总会遇到一些问题,我们可以在网上看到很多关于前端的这些问题: 你们都是怎么学web前端的? 零基础,怎么自学好前端? 前端需要学多久,都学哪些知识? 想成为一名合格的前端工 ...
- 基于webpack搭建前端工程解决方案探索
关于前端工程 \\ 下面是百科关于"软件工程"的名词解释: \\ \ 软件工程是一门研究用工程化方法构建和维护有效的.实用的和高质量的软件的学科. \ \\ 其中,工程化是方法,是 ...
- 导出库的版本_了解 JavaScript 模块系统基础知识,搭建自己的库
我想很多"前端工程师"都听过说过 "JavaScript 模块",那你们都知道如何处理它,以及它在日常工作中如何发挥作用吗? JS 模块系统到底是什么呢 随着 ...
- websockert后台定时向前端发送状态_(文末送书)手把手教你打造属于自己团队的前端小报系统...
本文首发于政采云前端团队博客:手把手教你打造属于自己团队的前端小报系统 https://www.zoo.team/article/building-a-tabloid-system 前言 经常关注我们 ...
- 让我们一起写一个前端监控系统吧!
CSDN话题挑战赛第2期 参赛话题:前端技术分享 项目介绍 我们基于Vue2.利用vue-plugin实现项目级别的npm包监控报错,并专为Vue项目设计了监控中台 核心监控插件开箱即用,用户可灵活选 ...
- 美团外卖系统架构演进与稳定性的探索
美团外卖系统架构演进与稳定性的探索 "相信大部分人都用过美团外卖,尤其是在每天的两个吃饭的高峰期.美团外卖从创业到现在经历了数次的迭代,不断的适应需求,提供更好的体验.本文是美团外卖架构师曹 ...
- 前端模块打包工具都有哪些---kalrry---ing
前端模块打包工具都有哪些---kalrry---ing 前言 一.Webpack 二.Parcel 三.Rollup 四.三者对比 END---待学 前言 Win配置记录 Mac配置记录 一.Webp ...
最新文章
- Ruby Metaprogramming
- Unity 2D游戏开发教程之为游戏场景添加多个地面
- python创建csv文件并写入-Python 将数据写入文件(txt、csv、excel)
- python决策树sklearn_请问python中的sklearn中决策树使用的是哪一种算法呢?
- Go报错:more than one character in rune literal
- java array 元素的位置_数据结构与算法:动态图解十大经典排序算法(含JAVA代码实现)...
- CentOS虚拟机不能联网状况下yum方式从本地安装软件包
- python查微信好友是否删除自己_Python + Appium 自动化操作微信查找自己是否被删除...
- C#常见编码方式总结
- 下列属于计算机人工智能应用领域的是多选题,每天五道选择题(10)
- php url路由入门实例,ThinkPHP URL 路由实例
- HTTP Header 详解 Requests 与 Responses 头信息
- gns3虚拟机服务器集群,GNS3中如何实现与Vmware Workstation连接
- thinkphp 下载txt文档
- Control-车辆动力学模型
- wifi密码破解软件,谨慎使用!
- 树莓派Pico开发版
- 自学Python去接单,一周就能赚取近1200块,你看不起的行业,真的很赚钱!
- STM32上电启动代码详解(转自安富莱电子)
- html是一种网页设计语言,html网页设计教程