Webpack与ES6模块

时间:2019-08-11 08:50:10

标签: webpack ecmascript-6 es6-modules

我最近开始学习Webpack。我了解的是,它将各种资产(如JavaScript,CSS等)捆绑在一起。

但是关于JavaScript,我们不能用ES6模块实现相同的功能吗?  例如,理想情况下,我们的着陆页.html文件中只能有一个类型为type的脚本,并且该脚本模块将以ES6方式导入require依赖项。

我认为几乎所有现代浏览器都支持ES6模块。 Webpack在这种情况下不是多余的吗?

2 个答案:

答案 0 :(得分:1)

对于大多数浏览器,是的,您只需使用ES6模块即可完成所有需要的代码到浏览器的访问,而无需Webpack。但是,是否要执行此操作是另一回事,这取决于目标浏览器以及应用程序包含多少个模块(与您对许多网络请求的承受能力之间的平衡)。

目前,浏览器对ES6模块的支持已非常普遍,但是例如,在Android上,嵌入式应用内浏览器目前不支持export。因此,如果您想让脚本在Android上的Facebook,LinkedIn或Twitter的应用程序内浏览器中运行,就会出现问题。

一个潜在的更大问题是,如果不捆绑代码,可能需要期望的网络请求数量。例如,如果您的应用程序包含两打模块(根本没有疯狂的模块数量),那么浏览器必须发出两打网络请求。您可能知道,在两个请求中加载(例如)200K的JavaScript比在一个请求中加载相同的200K的JavaScript要慢得多。

最后,即使您打算在客户端加载两个模块,大概也要加载最小的JavaScript(即使您不进行编译,也只是最小化)。这意味着您已经在进行一些服务器端代码操作。这意味着将所有代码捆绑为最后一步仍然几乎总是有意义的。

希望这会有所帮助!这是一个很好而合理的问题。只是回答就使我想到了我之前从未真正考虑过的东西。

答案 1 :(得分:0)

我认为,当es6导入在浏览器中成为标准配置时,Webpack将继续作为功能中的有用工具。

Webpack管理很多事情:插件,加载器等。而且,捆绑将始终是需求。

此外,出现了Webpack版本5,该版本提供了模块联合功能,您可以在其中使用部分代码从一个捆绑软件转换为另一个捆绑软件。这确实是一个很棒的功能,尤其是在微前端中。

所以,我认为Webpack确实是一个很棒的工具,它将永远有用...