Webpack 概念理解 module、chunk 和 bundle 的区别

Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.


Bundle: bundle通常是由多个不同的模块产生,它是已经加载完毕和被编译后的源代码的最终版本。


Bundle Splitting: This process offers one way of optimizing a build, allowing webpack to generate multiple bundles for a single application. As a result, each bundle can be isolated from changes effecting others, reducing the amount of code that needs to be republished and therefore re-downloaded by the client and taking advantage of browser caching.


Bundle Splitting: 这是webpack优化代码的一种方法,即将一个单独的应用拆解为多个bundle。通过将多个bundle中公共引入的模块拆解出来,我们可以减少项目的代码量,从而减小应用的体积,并且通过浏览器缓存,我们可以将代码进一步优化。


Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child). Typically, chunks directly correspond with the output bundles however, there are some configurations that don't yield a one-to-one relationship.


Chunk: 这个webpack中专用的术语用于管理webpack内部的打包进程。bundle由许多chunk组成,chunk有几种类型,比如说“入口”和“子块”。通常chunk和输出的bundle一一对应,但是,有些是一对多的关系。


Code Splitting: Refers to dividing your code into various bundles/chunks which you can then load on demand instead of loading a single bundle containing everything.


Code Splitting: 它表示将你的代码拆分成多个bundle或chunk,之后你可以按需加载它们,而不是简单地加载一个单独的文件。


Module: Discrete chunks of functionality that provide a smaller surface area than a full program. Well-written modules provide solid abstractions and encapsulation boundaries which make up a coherent design and clear purpose.


Module: 相比于一个完整的项目,项目中分散的一个个功能性模块能够提供一个对于程序员来说更加专注的视角。一个编写良好的模块能够形成一个很清晰的抽象结构,保证之后的维护基于此能够变得规范化和开发具有明确性。


Module Resolution: A module can be required as a dependency from another module and a resolver is a library which helps in locating a module by its absolute path. Modules are searched for inside all directories specified in resolve.modules.


Module Resolution(模块解析): 一个模块可以作为另一个模块的依赖项,即在另一个模块中通过import或者require的方式进行引入。模块解析器是一个代码库,通过这个代码库对引入的模块进行解析。我们可以在resolve.modules自定义设置自己的解析路径,以更好地方便个人脚本在项目中的引入。



总结:

module 就是没有被编译之前的代码,通过 webpack 的根据文件引用关系生成 chunk 文件,webpack 处理好 chunk 文件后,生成运行在浏览器中的代码 bundle。




参考:

https://webpack.js.org/glossary/

https://github.com/jantimon/html-webpack-plugin#configuration

https://www.jianshu.com/p/cf391c42f905

https://zhuanlan.zhihu.com/p/98677441


声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
随机推荐
wp_signon() 自定义用户登录函数
CSS 改变 svg 图片颜色
CSS3 实现 Switch 开关
CSS 媒体特性 prefers-color-scheme
WordPress 获取当前主题文件夹的路径
MySQL 批量修改时间
River 主题
WordPress 插入文章函数 wp_insert_post()