本系列文章实际上就是官网文档的翻译加上自己实践过程中的理解。

  

  伴随着websites演化至web apps的过程,有三个现象是很明显的:

  1. 页面中有越来越多的Js。
  2. 客户端能做的事情越来越多。
  3. 越来越少的页面重载(当然也伴随着更复杂的代码)。

  这些现象导致了什么?大量的前端代码。  

  庞大的代码库需要被高效的组织。而Module(组件式)开发的系统即为大多数开发者采取的途径。

  MODULE SYSTEM STYLES

  有很多种定义依赖,导出变量的标准或者说方法:

  • <script> tag 的形式(不通过组件系统)
  • CommonJs
  • Amd形式
  • ES6组件
  • 各种其它风格。。    

  <script>tag形式

  在非组件系统中,我们的模块化后的代码是这样被组织的。

  1.   <script src="module1.js"></script>
  2.   <script src="module2.js"></script>
  3.   <script src="libraryA.js"></script>
  4.   <script src="module3.js"></script>

  各个组件向全局变量提供了一个个接口(如:浏览器环境的 window对象)。之后,借助全局对象,我们就能使用这些组件。

  痛点

  • 全局对象可能会有属性间冲突(这就是Jquery提供了给$重命名途径的原因)
  • 我们需要关心组件加载的顺序(先加载依赖项)
  • 开发者需要花很多精力来解决依赖问题。
  • 在较大的项目中,tag列表将会变得非常的大且难于维护。  

   CommonJs:同步式的require

  这种风格的组件系统使用同步的形式来加载依赖项,并返回导出的接口。每一个组件可以借助exports对象或者配置module.exports来导出接口(Node.js开发者再熟悉不过了)。

  1. require("module");
  2. require("../file.js");
  3. exports.doStuff = function() {};
  4. module.exports = someValue;

  优点

  • 适合用作后端的组件(一次性加载到Cache以重用)
  • 已经有了很多此风格的组件(NPM)
  • 简单易用

  痛点

  • 阻塞式,不适合前端。

  典例

  • node.js
  • browserify
  • modules-webmake
  • wreq

AMD:异步式的require

   AMD的全称是Asynchronous Module Definition,很多需要用到组建式系统,但又感受到它们在前端的痛点的开发者建设了AMD。

  1. require(["module", "../file"], function(module, file) { /* ... */ });
  2. define("mymodule", ["dep1", "dep2"], function(d1, d2) {
  3. return someExportedValue;
  4. });

   优点

  • 异步加载,适合前端环境。
  • 并行加载,带来速度提升。

  痛点

  • 带来了更多的代码工作量。

  典例

  • require.js
  • curl.js

  ES6组件

   From EcmaScript6

  1. import "jquery";
  2. export function doStuff() {}
  3. module "localModule" {}

  虽然是标准,但是被浏览器广泛支持还需要一段时间。

 TRANSFERRING

   组件虽然被执行于客户端,但不可避免需要经由服务器传送。

   关于组件的传送,有两个极端:

  1. 每个组件,一个HTTP请求。

    • 优点:仅仅传送依赖项。
    • 缺点:请求多,负载高,更慢的启动延迟。
  2. 所有的组件,一个HTTP请求。
    • 优点:更快,更低延迟。
    • 传送了没必要传的东西。

  让我们在两者间做一个妥协。在大多数情况下,以下的方法将更为适用:

  ->在编译所有的组件时,将组件分为多种批次(chunks or batches)。

  再某个批次再被需要的时候,再发送他们。

  解决了前者带来的请求的高延迟、高负载,后者带来的无必要信息的传送。

  那么,问题来了,这个分批次由谁来做?

  webpack。

  当然,gulp,grunt也是时下很火的可选项。具体工具的选型,仁者见仁,智者见智。

  

  WHY ONLY JAVASCRIPT?

  组件化系统难道就只能为javascript服务吗?前端还需要解决的问题有

  • 样式表
  • 图片
  • 字体
  • 模版
  • coffeescript -> js
  • less -> css
  • jade -> html
  • 各种。。。。。。

  没错,这些,webpack也能搞定

  1. require("./style.css");
  2. require("./style.less");
  3. require("./template.jade");
  4. require("./image.png");

  

     

  

webpack 学习笔记 01 使用webpack的原因的更多相关文章

  1. webpack学习笔记——sourcemap(使用webpack打包的项目如何调试代码)

    [webpack]devtool里的7种SourceMap模式是什么鬼? 里面详细介绍了7种模式的区别,和建议使用. webpack sourcemap 选项多种模式的一些解释 两篇文章大同小异,第一 ...

  2. 软件测试之loadrunner学习笔记-01事务

    loadrunner学习笔记-01事务<转载至网络> 事务又称为Transaction,事务是一个点为了衡量某个action的性能,需要在开始和结束位置插入一个范围,定义这样一个事务. 作 ...

  3. webpack学习(六)—webpack+react+es6(第3篇)

    接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...

  4. webpack学习(六)—webpack+react+es6(第2篇)

    接上篇        webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...

  5. C++ GUI Qt4学习笔记01

    C++ GUI Qt4学习笔记01   qtc++signalmakefile文档平台 这一章介绍了如何把基本的C++只是与Qt所提供的功能组合起来创建一些简单的图形用户界面应用程序. 引入两个重要概 ...

  6. SaToken学习笔记-01

    SaToken学习笔记-01 SaToken版本为1.18 如果有排版方面的错误,请查看:传送门 springboot集成 根据官网步骤maven导入依赖 <dependency> < ...

  7. Redis:学习笔记-01

    Redis:学习笔记-01 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 1. Redis入门 2.1 ...

  8. 学习webpack基础笔记01

    学习webpack基础笔记 1.webpack搭建环境最重要的就是如何使用loader和plugins,使用yarn/npm安装插件.预处理器,正确的配置好去使用 2.从0配置webpack - 1. ...

  9. 【原】webpack学习笔记

    之前在react的项目中有用过webpack,不过没有认真的去研究,这段时间又重新好好的学习一下webpack,发觉 webpack是一个很强大的东西.而且很好用,方便,接下来主要是做一下学习的笔记 ...

随机推荐

  1. HDU1232畅通工程

    http://acm.split.hdu.edu.cn/showproblem.php?pid=1232 #include<stdio.h> #include<string.h> ...

  2. 增量升级(省流量更新)的Android客户端实现

    转载与 zhouhuiah的专栏 http://blog.csdn.net/zhouhuiah/article/details/16939937 本文在以上两篇博客的基础上再增加了异常处理,并将生成的 ...

  3. "开发路上踩过的坑要一个个填起来————持续更新······(7月30日)"

    欢迎转载,请注明出处! https://gii16.github.io/learnmore/2016/07/29/problem.html 踩过的坑及解决方案记录在此篇博文中! 个人理解,如有偏颇,欢 ...

  4. 学习笔记-解析xml文件

    1.  Dom4J <students>       <student>         <name>吴飞</name>           <c ...

  5. THE ONE THING PEOPLE WILL MASSIVELY OVERPAY FOR (有一个东西人们是愿意出高价购买的)

    THE ONE THING PEOPLE WILL MASSIVELY OVERPAY FOR有一个东西人们是愿意出高价购买的 by GARY VAYNERCHUK 点此直达湾区日报简评 I don' ...

  6. 翻译「C++ Rvalue References Explained」C++右值引用详解 Part3:右值引用

    本文为第三部分,目录请参阅概述部分:http://www.cnblogs.com/harrywong/p/4220233.html. 右值引用 如果x是任意类型,那么x&&则被称作一个 ...

  7. vc不用IDE编译方法

    一个EXE是如何形成的 比如一个源程序有以下两个文件. 1.c 1.rc 首先cl.exe 会把源代码编译为1.obj rc.exe会把1.rc编译为1.res link.exe会把1.obj 1.r ...

  8. IE11-IE不再任性了-关于attachEvent

    今天解决了一个IE11的兼容问题,关于attachEvent的. 控件是ActiveX的,需要监听一个控件相关的事件.蓦然发现attachEvent在IE11不支持了...attachEvent不是I ...

  9. Retina CS强大漏洞检测工具

    RetinaCS强大漏洞检测工具 Eeye数字安全公司成立于上世纪九十年代末期,它是世界领先的安全公司,它采用最新研究成果和创新技术来保证您的网络兄系统安全,并向您提供最强大的如下服务:全面的.漏洞评 ...

  10. Windows Socket网络编程-2016.01.07

    在使用WSAEventSelect的套接字模型中,遇到了WSAEventSelect返回10038的错误,在定位解决的过程中,简单记录一些定位解决的手段摘要. 使用windows的错误帮助信息,使用命 ...