webpack 如何抽离公共代码和第三方库？

假设有下面三种场景

场景一：index.js 和 other.js 文件同时引入 common.js 文件，打包的时候 index.js 和 other.js 中的 common.js 会打包两次。这种情况如何处理？

场景二：index.js 和 other.js 两个文件同时引入第三方模块 lodash，若 lodash 体积过大，每次打包会打两次。这种情况又如何处理？

场景三：index.js 和 other.js 两个文件同时引入第三方模块 lodash，若每次对 index.js 或 other.js 做了很微小的修改，再次打包时 lodash 又莫名其妙的打包两次。针对这种浪费资源的情况应该如何处理？

以上三种场景，都会被动的把公共代码或第三方库打包多次，导致打包出来的代码体积过大，浪费资源，所以要把公共代码或第三方库单独抽离出来。抽离后，如果公共代码没有修改，再次打包时，直接命中缓存，不会再次打包。

配置一：splitChunks 分割代码块

配置二：chunk 的引用

chunks:[] 代表该页面需要分割的哪些代码块

打包后的 dist 文件内，会生成 common.js 和 vendor.js 文件，此时包被拆开。之后，若公共模块代码未修改，则不会被再次打包。

webpack 如何抽离公共代码和第三方库？相关推荐

Webpack 4.X 从入门到精通 - 第三方库（六）
在开发的时候会时常用到第三方的库或者框架,比如耳熟能详的jquery.借助它们能提高开发效率,但是如何在webpack中使用呢.这篇文章介绍两个东西,如何使用第三方库以及如何提取第三方库. 使用第三方 ...
Python爬虫仅需一行代码----crawl第三方库
仅需一行代码写爬虫–simple_crawl simple_crawl 仅需一行代码即可达到爬虫效果项目地址(欢迎star):https://github.com/Amiee-well/crawl ...
IOS常用代码总结 - 第三方库部分
1 SBJson的使用 JSON是一种数据交换语言,和XML是同样用途的.不过JSON的体积要比XML小,也就意味着在网络传输中速度会比XML更快. 这里可以看到更多关于json的资料:http:/ ...
【python】python翻译的代码和第三方库
背景在项目中需要对文本进行翻译:中转英居多,希望采用自动化的方式实现. 解决参考 """有道翻译API的调用函数(封装为一个函数使用)""&quo ...
引入三方库_关于使用第三方库、代码复用的一些思考
选择优质文章,及时送达作者:xybaby 链接:cnblogs.com/xybaby/p/11372846.html 正文不管是不要重复造轮子,还是站在巨人的肩膀上,对于软件开发来说,代码复用都 ...
利用DllPlugin分割你的第三方库
前言小站利用React全家桶开发,在上线之后,发现第三方bundle(2Mb左右)下载用了近20秒. 最初发现的问题是nginx压缩配置gzip没有添加application/javascript这 ...
android qq分组展开,Android仿qq分组管理的第三方库
本文实例为大家分享了Android仿qq分组管理的第三方库,供大家参考,具体内容如下下面先看效果我们点击展开与折叠分组的功能在库里面是已经封装好的,只能把它已入到项目中,就可以直接用了,十分的方便 ...
介绍一个仿qq分组管理的第三方库
下面先看效果我们点击展开与折叠分组的功能在库里面是已经封装好的,只能把它已入到项目中,就可以直接用了,十分的方便. 下面直接上核心代码首先定义分组的对象,相当于上面红色字体的对象,跟分组下每个it ...
The way of Webpack learning (II.) -- Extract common code（多页面提取公共代码）
学习之路基于webpack3.10.0,webpack4.0之后更新. 多页面提取公共代码!!! 一:文件关系 pageA --> subA.subB --> moduleA pageB ...

webpack 如何抽离公共代码和第三方库？

配置一：splitChunks 分割代码块

配置二：chunk 的引用

webpack 如何抽离公共代码和第三方库？相关推荐

最新文章

热门文章