关于webpack2中CommonsChunkPlugin插件

最新推荐文章于 2025-08-07 15:57:28 发布
最新推荐文章于 2025-08-07 15:57:28 发布
阅读量164 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： webpack ViewUI
原文链接：https://segmentfault.com/a/1190000011975082
本文介绍如何使用Webpack配置文件来提取两个JS文件中的共同依赖，并将其打包到单独的bundle中，以此来优化资源加载效率。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. webpack配置文件片段:

clipboard.png

clipboard.png

提取公共资源到一个输出bundle中

2.两个具有相同依赖的js文件:

clipboard.png

clipboard.png

webpack执行后就只能在根据webpack配置文件生成的common.bundle,js文件中找到共同依赖

clipboard.png

当然了,由于是共同依赖,所以他们在html中的引用是靠前的

clipboard.png

Webpack 提取公共代码的 CommonsChunkPlugin 插件
XymkMl的博客
09-25 268
这样，当用户访问网页时，只需加载 vendor.bundle.js 和 app.bundle.js 两个文件，从而减少了加载时间和带宽消耗。Webpack 的 CommonsChunkPlugin 插件是一个强大的工具，可以帮助我们将公共的 JavaScript 代码提取到单独的文件中，优化项目的性能和加载速度。CommonsChunkPlugin 插件使我们可以将公共的 JavaScript 代码提取到一个单独的文件中，从而减小每个入口文件的体积，提高加载速度。
webpack3插件CommonChunkPlugin分离第三方库和公共模块
E_li_na的博客
05-22 5917
个性定位：优化利器 可以建立一个独立文件(又称作 chunk)的功能，用于提取第三方库和公共模块。 但是webpack 4已经到取消了这个插件，转而使用SplitChunksPlugin，相关文章webpack4: 代码分割CommonChunkPlugin的寿终正寝,详解CommonsChunkPlugin的配置和用法 1、不分离出第三方库和公共模块 1、1 准备文件 src目录下...
webpack 2.x 之 CommonsChunkPlugin
ldyeyuguo1346的博客
07-24 1107
针对 antd-design 引入组件后文件很大，使用webpack 优化 由于 antd-desgin 设置按需加载，写好的组件模块会很大，优化组件包大小有下列两种方式 通过 webpack 设置 externals 从外部引入 antd.js 文件(较方便、简单); 通过 webpack 插件 CommonsChunkPlugin 提取公共的部分(编译过程有点
Webpack 提取公共代 CommonsChunkPlugin
weixin_34289744的博客
07-03 161
背景如果不提取公共部分会有什么后果？ 1. 相同资源重复加载引用，浪费用户流量以及服务器成本； 2. 每个页面需要加载的资源太多，导致网页首页加载缓慢；提取之后有什么优点？ 1. 相同资源只打包加载一次，减少网络传输流量，降低服务器压力； 2. 页面加载速度加快，提交用户体验；具体用法思路 1. 根据项目使用的技术栈，把所有页面都要使用到的基础库提取出来，形成一个`bas...
webpack——CommonsChunkPlugin
张勇的博客
12-26 4231
作用 虽然webpack4已经出来很久了，CommonsChunkPlugin也已经舍弃了，但是还是有很多项目是通过webpack3来打包的，对CommonsChunkPlugin各个配置项的认识还是比较模糊，这里做个详细的记录。 CommonsChunkPlugin通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，以便存到缓存中供后续使用。     既然是将公共模块拆分出来，那么肯...
webpack配置中常用的CommonsChunkPlugin
Jonathan的博客
06-01 2526
CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，是一把优化项目的利器。 CommonsChunkPlugin作用： 一、不分离出第三方和自定义模块 项目初始结构，后面打包后会生成dist目录： src目录下各个文件内容都很简洁的，如下： webpack.config.js: 接着在命令行运行npm run build，此时项目中多了dist目录： 再来看一下命令行中webpack的打包信
使用webpack2和extract-text-webpack-plugin时遇到Chunk entry was rem
qq_44884619的博客
04-09 235
使用webpack2和extract-text-webpack-plugin时遇到Chunk entry was rem
webpack中CommonsChunkPlugin详细教程(小结)
11-26
Webpack 中的 CommonsChunkPlugin 是一个用于提取多个入口点（entry points）共有的模块的插件。这个插件的主要目的是优化构建结果，减少网络请求，提高页面加载速度。下面将详细介绍 CommonsChunkPlugin 的工作原理...
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
08-28
在本篇文章中，我们将介绍使用webpack的CommonsChunkPlugin插件来提取公共代码的3种方式。 什么是CommonsChunkPlugin？ CommonsChunkPlugin是webpack的一个插件，负责将多次被使用的JS模块打包在一起。它可以解决...
webpack 简单笔记（二）CommonsChunkPlugin插件
weixin_33729196的博客
02-07 132
接下来就要使用CommonsChunkPlugin插件 （一）单一入口，模块单一引用，分文件输出,单一入口，模块重复引用，分文件输 main.js代码 require('./static/js/main1.js') require('./static/js/main2.js') console.log('I`m main.js'); webpack.config.js代码 ...
webpack性能优化 —— CommonsChunkPlugin
xhsdnn的专栏
09-10 2933
webpack有很多种优化方式，这里先就CommonsChunkPlugin这个插件说一下；看到CommonsChunkPlugin这个名字，大概明白这个插件是跟公共模块有关系的。没错，这个插件就是用来提取出代码中公共的部分，并且将他们打包到一个单独的文件里面，这样就避免了重复打包。当然CommonsChunkPlugin不仅仅是提取公共部分这么简单......
用webpack的CommonsChunkPlugin提取公共代码的3种方式
热门推荐
08-22 5万+
前面我们实现了 多页面分离资源引用,按需引用JS和css 但有一个问题：最后生成的3个js，都有重复代码，我们应该把这部分公共代码单独提取出来。方式一，传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common.jsvar HtmlWebpackP
webpack--关于CommonsChunkPlugin拆分模块的应用
ChpeShy的博客
05-08 3717
官网介绍：http://www.css88.com/doc/webpack2/plugins/commons-chunk-plugin/下面代码的源码见：一、介绍CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续...
webpack4: 代码分割CommonChunkPlugin的寿终正寝
假面猫的博客
02-28 1万+
这是小弟第一次翻译，虽自己理解了其精华，但无法精准表达，还望海涵。 webpack 4对块图进行了一些重大改进，并增加了对 chunk 拆分的新优化（这是对 CommonsChunkPlugin 的一种改进）。 让我们看看之前的块图存在的缺点。 之前的块图通过父子关系连接到其他块，chunk 包含模块。 当一个块有父母时，可以假定在加载时至少有一个父母已经加载了。这些信息可以被优化...
webpack中的chunk
gaofan_long的博客
12-05 4803
Webpack 理解 Chunk - 掘金 Webpack 理解 Chunk 期望 希望读过本篇文章，你在看Webpack配置的时候，能在脑中形成Chunk的生成过程。 Chunk Chunk不同于entry、 output、module这样的概念，它们对应着Webpack配置对象中的一个字段，Chunk没有单独的配置字段，但是这个词出现在CommonsChunkPlugin（Webpack3以前）、optimization.splitChunks（Webpack4以后）这样的名称之中。 Chu
webpack.optimize.CommonsChunkPlugin插件的使用
weixin_34174322的博客
12-04 814
方式一，传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common.js 1 var HtmlWebpackPlugin = require('html-webpack-plugin'); 2 var webpack = require('webpack');...
Webpack核心概念全景指南：从入门到精通
王二的博客
08-07 607
Webpack作为现代前端开发的核心工具，能够有效解决模块化开发、资源优化和代码转换等关键问题。本文系统介绍了Webpack的核心概念、环境搭建、基础配置、Loader处理、Plugin应用和高级优化技巧。主要内容包括：Webpack的模块化打包本质，Node.js环境配置，多入口和开发服务器设置，各类资源Loader的对比与实现，核心插件（HtmlWebpackPlugin、MiniCssExtractPlugin等）的应用，以及HMR热更新和Source Map策略等高级特性。通过模块化示例和配置代码，
前端项目工程化配置webpack与vite
Jet_Lover的博客
08-01 1070
本文对比介绍了webpack和vite两个主流前端构建工具的核心概念和配置方法。webpack作为静态模块打包工具，重点讲解了其entry、output、loader、plugin和mode五大核心配置项，并展示了在Vue和React项目中的实际应用。vite部分则突出了其基于原生ESM的开发服务器优势，详细解析了构建选项和模块解析配置，包括输出目录设置、代码压缩选择和路径别名定义等。两者都通过具体代码示例展示了配置文件写法，为开发者提供了实用的技术参考。
JavaScript构建工具
最新发布
Mr_linsir的博客
08-07 543
JavaScript构建工具
使用webpack打包创建vue-toast插件全攻略
在本文中，我们将深入探讨如何使用webpack打包创建一个自定义的Vue Toast插件。Vue Toast插件是一种常见的UI组件，用于显示短暂的通知消息。我们将按照以下步骤进行： 1. 项目结构： 项目目录包括`package.json`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值