webpack模块依赖管理介绍
- 是一个模块管理器
- webpack可以管理模块的依赖关系,并产生可以替代这些模块的静态代码
- <script>:
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libaryA.js"></script>
<script src="module3.js"></script>- 冲突,加载顺序,依赖,长且难于管理
- commonjs(同步):
require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;- 网络同步请求块级调用不适用,多模块无法并行调用
- 实践:nodejs,browerify,modules-webmake(编译成为一个bundle),wrep(客户端)
- AMD(异步):
require(["module", "../file"], function(module, file) { /* ... */ });
define("mymodule", ["dep1", "dep2"], function(d1, d2) {
return someExportedValue;
});- 适用于网络异步模型,多模块并行加载
- 代码过重难于读写,更像是为了解决问题的变通方法
- ES6 MODULES:
import "jquery";
export function doStuff() {}
module "localModule" {}- 易于静态分析,确认为未来的ES标准
- 原生浏览器支持需要时间,仅有很少模块采用这种形式
- webpack:
- 让开发者选择模块风格,允许已有代码正常运行,易于添加用户模块类型
- 模块需要在客户端运行,所以模块需要从服务端转移到浏览器端
- 两种极端的转移方法
- 一个请求一个模块
- 优点:仅请求需要的模块
- 缺点:多模块请求次数过多
- 缺点: 请求延时导致app打开过慢
- 一个请求所有模块
- 优点:请求次数减少,请求延时减少
- 缺点:不能够按需请求
- 模块组(chunked)转移:当编译所有模块时:将模块集合划分为多个小一些的模块组。
- 通过这种方法我们得到多个更小的请求,初始化时不需要的模块组可以按需请求,初始化请求不在包含完整模块代码并且变得更小了。
- 模块组的划分(代码分割)取决于开发者的需求并且是可选的。
- 大量代码库成为可能。
- GOOGLE’S GWT: http://www.gwtproject.org/doc/latest/DevGuideCodeSplitting.html
- 更多代码分割资料: http://webpack.github.io/docs/code-splitting.html
- 资源
- 样式,图片,webfonts,html模板等
- coffeescript,less样式表,jade模板,i18n文件
- 解决方案: Using loaders 和 Loaders
- 当编译全部模块的时候,静态分析系统会尝试找到对应依赖
- 现状:通常该系统只能找到没有表达式的简单依赖,但是表达式方式确是很常见的require("./template/" + templateName + ".jade")
- 解决方案:智能解析器允许大部分的已有代码正常运行,即使开发者做了什么奇怪的事情,解析器也会找到兼容性最好的解决方案。
以上内容翻译整理自 http://webpack.github.io/docs/motivation.html
webpack模块依赖管理介绍的更多相关文章
- javascript 模块依赖管理的本质
模块模式定义 模块是'javascript'的一种设计模式,它为函数定义一个包装函数,并且该包装函数的返回值与模块的API保持一致: function createModule() { functio ...
- 玩转IDEA项目结构Project Structure,打Jar包、模块/依赖管理全搞定
前言 你好,我是A哥(YourBatman). 如何给Module模块单独增加依赖? 如何知道哪些Module模块用了Spring框架,哪些是web工程? IDEA如何打Jar包?打War包? 熟练的 ...
- mvc-6依赖管理
CommonJS CommonJS规范,主要解决命名空间管理模块和用一套标准的编程模式来加载模块: 很快成为了JavaScript模块写法的事实标准: 它包含IO接口,底层的套接字流,以及单元测试等标 ...
- maven冲突管理及依赖管理实践
1.“最近获胜策略(nearest wins strategy)”的方式处理依赖冲突 Maven采用“最近获胜策略(nearest wins strategy)”的方式处理依赖冲突,即如果一个项目最终 ...
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- webpack对多个模块依赖进行打包
[ webpack3.0.0刚刚出来 所以文章是跟着低版本 教程 操作熟悉 结果好多对不上喔] 七:webpack对多个模块依赖进行打包 通过一刚开始我们了解到 webpack支持commonJS ...
- webpack中多模块依赖
多模块依赖 刚才的例子,我们仅仅是跑通了webpack通过entry.js入口文件进行打包的例子.下面我们就来看一下它是否真的支持CommonJs和AMD两种模块机制呢?下面我们新建多几个js文件吧! ...
- Maven多模块项目依赖管理
Maven多模块项目依赖管理及dependencies与dependencyManagement的区别 转自:http://blog.csdn.net/liutengteng130/article/d ...
- webpack模块解析
前面的话 在web存在多种支持JavaScript模块化的工具(如requirejs和r.js),这些工具各有优势和限制.webpack基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文 ...
随机推荐
- tomcat下jsp要加工程名后缀才能访问的问题解决
今天发现一个部署的项目,在tomcat中配置了去掉工程名,直接通过域名访问.配置后其它的html.动态请求等都可以不带工程名访问,但是只要访问jsp页面就报404错误,加上工程名访问jsp却又正常. ...
- Learn ZYNC (2)
AXI HP接口的DMA+GIC编程(参照博客) 参照文档:UG873,博客文档 参考设计代码文件:ug873源码 我的Vivado+SDK工程文件打包(60+M) 我的DMA驱动程序(已完成) Vi ...
- Ubuntu下安装R语言和开发环境
[简介]R是用于统计分析.绘图的语言和操作环境.R是属于GNU系统的一个自由.免费.源代码开放的软件,它是一个用于统计计算和统计制图的优秀工具. [R语言的安装]官网:https://www.r-pr ...
- 【资料下载区】【iCore3相关代码、资料下载地址】更新日期2017/1/5
[iCore3 ARM代码下载地址][全部]DEMO1.0测试程序发布例程一:ARM驱动三色LED例程二:读取arm按键状态例程三:EXTI中断输入实验——读取ARM按键状态例程四:USART通信实验 ...
- 简单的行为控制管理方法,自动登录,session定时验证码过期
代码很简单 实现的方式很多,用cookies 用static 变量 file文件缓存 等等 比如 //简单行为管理,如果请求此方法次数多于5次,就显示验证码 吧当前方法的name传进来,有效时间是5分 ...
- elasticsearch-hadoop使用示例
在elasticsearch-hadoop的具体使用中碰到了几个问题,有必要记录一下,避免下次遇到时又要重新研究. 利用spark读取es数据源的简单示例 import org.elasticsear ...
- Nginx多个域名,https redirect to http
背景描述:Nginx绑定多个域名,其中一个域名配置了https,如域名A:https://www.aaa.com:另外的域名B(http://www.bbb.com)没有配置SSL证书, 问题:以ht ...
- sleep thread process
$str = 'w0'; for($w=0;$w<999999;$w++){ $sql = 'INSERT INTO w1 (wint,wchar) VALUES ('.$w.',"' ...
- linux实践之程序破解
linux实践之程序破解 这次的实践是文件破解,让我们从login可执行文件开始吧! 首先我们执行一下这个可执行程序 ①我们希望在不知道密码的情况下,能够登陆进去.且无论密码是什么,都是提示“on y ...
- 两个NOI题目的启迪8皇后和算24
论出于什么原因和目的,学习C++已经有一个星期左右,从开始就在做NOI的题目,到现在也没有正式的看<Primer C++>,不过还是受益良多,毕竟C++是一种”低级的高级语言“,而且NOI ...