0

0

为什么要用Webpack

伊谢尔伦

伊谢尔伦

发布时间:2016-11-21 13:12:34

|

1566人浏览过

|

来源于php中文网

原创

 使用更多 javascript

  更多的用户界面通过现代浏览器提供服务

  页面在提供服务的过程中,尽可能少地刷新整个页面

  所以现在的网站有非常多代码在客户端运行!庞大的代码库需要被有序地管理起来,而模块系统「module system」提供一种能力,将代码库切分成一个个模块「module」

  模块系统的派别们

  定义模块及模块依赖的方法有好几种标准

CommonJS

AMD

ES6 模块系统

还有其他的...


  script 标签

  这种方式并没有使用任何模块系统

各个模块向全局对象「例如,window 对象」导出一个接口。其他模块通过全局对象访问这个接口。

  缺点:

  容易引起冲突

  需要很注意模块加载的顺序

  模块使用者需要分解模块的依赖

  在大项目里,需要管理的模块非常多,管理难度很高

  CommonJS:同步的 require 方法

  这种方式使用同步的 require 方法加载一个依赖的模块,并且返回一个接口。给导出对象「exports」添加属性 或者给 module.exports 赋值,都可以定义模块的导出对象。

 这种方式通常被使用服务器端 NodeJS

  优点

  可以利用服务器度的代码

  npm 已经有许多使用这种风格的模块

  非常方便易用

  缺点

  阻塞的加载方式不适用于网络环境,网络请求是异步的

  加载多个模块时,没有平行加载

  AMD: 异步的 require方法其他应用于浏览器环境模块系统,不支持同步的 require ,但提供了异步 require 方法:

 优点

  符合网络环境下的异步请求方式

  多个模块可以平行加载

  缺点

  额外的编码开销。可读性比较差

  有点像一种临时方案

  实现:RequireJS

  ES6 模块系统

  ECMAScript 2015「第6版本」,为 JavaScript 提供了一些语言结构,形成另一种模块系统

DaGaoPeng(大高朋网团购程序)
DaGaoPeng(大高朋网团购程序)

大高朋团购系统是一套Groupon模式的开源团购程序,开发的一套网团购程序,系统采用ASP+ACCESS开发的团购程序,安装超简,功能超全面,在保留大高朋团购系统版权的前提下,允许所有用户免费使用。大高朋团购系统内置多种主流在线支付接口,所有网银用户均可无障碍支付;短信发送团购券和实物团购快递发货等。 二、为什么选择大高朋团购程序系统? 1.功能强大、细节完善 除了拥有主流团购网站功能,更特别支

下载

优点

  便于静态分析

  面向未来的 ES 标准

  缺点

  浏览器支持此特性,还需要一些时间

  现在还比较少模块是基于这种方式编写的

  客观的解决方案

  让开发人员选择模块系统,允许现有的代码库运行「即使它们使用了其他的模块系统」。

  传输

  模块需要从服务器传输到客户端,才能被客户端执行。有两种比较极端的传输方式,这两种方式都被广泛应用,但都不是最佳的

  一个模块一次请求

  所有的模块都在一次请求

  一个模块一次请求

优点:只有需要的模块才会被传输

缺点:过多的请求开销

缺点:请求延迟较大,导致程序开始比较慢


  一次请求所有模块

优点:请求开销比较少,延迟较少

缺点:还未使用到的模块,还被下载到客户端了


  分片传输

  多数场景下,需要一种更灵活的传输方式,它介于以上两种极端情况之间:

  当编译所有模块时,将一系列模块分解成一组小的分片「chunk」

  相对一次请求所有模块,分片的方式使网络请求变成多个更小,更快的请求。程序启动时,不需要用到的分片,将会在需要时才被加载。

  相对于一次请求一个模块,这加快程序的初始化,但仍然可以让你在实际使用时获取更多的代码「减少网络请求开销」。

  怎么分片, 在哪里分片是由开发者决定的 。大代码库通过这种方式可以组织得很合理。

  结语

  针对以上两大主题, Webpack 支持多种模块系统风格,支持灵活的 chunk 传输「Code Split」。

  Webpack 是一个 JS 模块打包工具,可以用它打包 Web 网站的 JS 代码库,也可以用来打包第三方代码库。不像 RequireJs 只支持 AMD,NodeJS 是 CommonJS, SeaJS 只支持 CMD,如今还有 ES6 Module ... Webpack 像是集大成于一身,开发者在此之上灵活根据自己喜好编码。

相关专题

更多
Java 桌面应用开发(JavaFX 实战)
Java 桌面应用开发(JavaFX 实战)

本专题系统讲解 Java 在桌面应用开发领域的实战应用,重点围绕 JavaFX 框架,涵盖界面布局、控件使用、事件处理、FXML、样式美化(CSS)、多线程与UI响应优化,以及桌面应用的打包与发布。通过完整示例项目,帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。

37

2026.01.14

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 高性能
PHP 高性能

本专题整合了PHP高性能相关教程大全,阅读专题下面的文章了解更多详细内容。

37

2026.01.13

MySQL数据库报错常见问题及解决方法大全
MySQL数据库报错常见问题及解决方法大全

本专题整合了MySQL数据库报错常见问题及解决方法,阅读专题下面的文章了解更多详细内容。

19

2026.01.13

PHP 文件上传
PHP 文件上传

本专题整合了PHP实现文件上传相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.13

PHP缓存策略教程大全
PHP缓存策略教程大全

本专题整合了PHP缓存相关教程,阅读专题下面的文章了解更多详细内容。

6

2026.01.13

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

交互式图表和动态图表教程汇总
交互式图表和动态图表教程汇总

本专题整合了交互式图表和动态图表的相关内容,阅读专题下面的文章了解更多详细内容。

45

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

9

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Webpack4.x---十天技能课堂
Webpack4.x---十天技能课堂

共20课时 | 1.4万人学习

两小时学会 Webpack
两小时学会 Webpack

共14课时 | 1.6万人学习

Node.js-前端工程化必学
Node.js-前端工程化必学

共19课时 | 3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号