详解CommonsChunkPlugin的配置和用法

最新推荐文章于 2022-04-22 11:05:13 发布
原创 最新推荐文章于 2022-04-22 11:05:13 发布 · 2.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍Webpack CommonsChunkPlugin如何有效提取第三方库和公共模块，通过实战案例展示不同配置下对首屏加载时间和按需加载文件体积的影响，是前端性能优化的实用指南。

简介

CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，着实是优化的一把利器。

实战应用

以下几个demo主要是测试以下几种情况：

  • 不分离出第三方库和自定义公共模块
  • 分离出第三方库、自定义公共模块、webpack运行文件，但它们在同一个文件中
  • 单独分离第三方库、自定义公共模块、webpack运行文件，各自在不同文件

实际操作请参考下面链接：

https://segmentfault.com/a/1190000012828879

详解node.js中的npm和webpack配置方法
10-18
此外，Webpack的很多功能可以通过在配置文件中添加插件来实现，比如CommonsChunkPlugin插件可以帮助实现代码分割和提取公共代码。 开发者可以通过npm run命令来运行Webpack配置，这通常在package.json文件的scripts...
简单谈谈CommonsChunkPlugin抽取公共模块
08-28
webpack每次build的时候都会生成一些运行时代码，当只有一个文件时，运行时代码直接塞到这个文件中，当有多个文件时，运行时代码会被提取到公共文件中，也就是上面CommonsChunkPlugin配置的vendor chunk中。...
commons-chunk-plugin 使用方法
u010928583的博客
11-01 3235
commons-chunk-plugin 使用方法 1、commons-chunk-plugin概述 CommonsChunkPlugin提取代码中的公共模块，然后将公共模块打包到一个独立的文件中，也可以将第三方模块分开打包，以便在其他的入口和模块中使用。需要在html中单独引入抽离出来的公共模块。 2、commons-chunk-plugin配置参数 { name: string, // o...
commonChunkPlugin插件
chuntianni1600的博客
04-19 237
如果配置为下面 ： new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'] }) 默认以chunk数组里的key去入口文件找key对应的数组 模块 提取公共代码打包 ...
webpack.optimize.CommonsChunkPlugin的minChunks解析
weixin_34026484的博客
02-10 1005
CommonsChunkPlugin， 顾名思义，是用来把公用模块打包到一起的插件，以减小打包后js文件的体积。 令人迷惑的minChunks 中文社区和官网都对此属性语焉不详。 首先，minChunks的Chunk是什么意思？ …… a separate file (known as a chunk).意思是当entry属性的值为对象时...
webpack配置中常用的CommonsChunkPlugin
Jonathan的博客
06-01 2558
CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，是一把优化项目的利器。 CommonsChunkPlugin作用： 一、不分离出第三方和自定义模块 项目初始结构，后面打包后会生成dist目录： src目录下各个文件内容都很简洁的，如下： webpack.config.js: 接着在命令行运行npm run build，此时项目中多了dist目录： 再来看一下命令行中webpack的打包信
详解Webpack DLL用法以及功能
08-30
详解Webpack DLL用法以及功能 Webpack DLL是Webpack优化的一种方式，主要用于对第三方库的优化。 在使用Webpack打包的时候，对于一些不经常更新的第三方库，比如react、lodash，我们希望能和自己的代码分离开。...
Webpack性能优化 DLL 用法详解
08-29
本文将深入探讨 Webpack DLL 用法，帮助开发者理解如何利用 DLLPlugin 和 DllReferencePlugin 实现这一优化。 首先，Webpack 的 CommonsChunkPlugin 是一种常见的优化手段，它允许我们将公共模块提取出来，形成单独...
CommonsChunkPlugin详解
关灯吃面
02-25 1985
在不指定的情况下，要提取的公共模块需要在入口文件里显式声明。 // main.js import Vue from 'vue' import App from './App.vue' import _ from "underscore"; new Vue({ el: '#app', render: h => h(App) }) // main2.js import _...
webpack中CommonsChunkPlugin详细教程(小结)
11-26
本文介绍了webpack中CommonsChunkPlugin详细教程(小结)，分享给大家，也给自己留个笔记，具体如下： 1.demo结构： 2.package.json配置： { "name": "webpack-simple-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "webpack": "webpack" }, "author": "", "license": "ISC", "dependencies": { "jquery": "^3.1.
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
11-26
Webpack 的 CommonsChunkPlugin 插件，负责将多次被使用的 JS 模块打包在一起。 CommonsChunkPlugin 能解决的问题 在使用插件前，考虑几个问题： 对哪些 chunk 进行提取，这决定了 chunks ，children 和 name 要怎么配置 common chunk 是否异步，这决定了 async 怎么配置 common chunk 的粒度，这决定了 minChunks 和 minSize 怎么配置 以下是官方给出的常用的场景： 提取两个及两个以上 Chunk 的公共代码 将 Code Split 切割出来的 Chunk「就
webpack提取公共模块-CommonsChunkPlugin
喵大嗷的博客
03-30 5721
CommonsChunkPlugin官方文档解释： CommonsChunkPlugin 插件，是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存到缓存中供后续使用。这个带来速度上的提升，因为浏览器会迅速将公共的代码从缓存中取出来，而不是每次访问一个新页面时，再去加...
webpack配置中常用的CommonsChunkPlugin认识
包磊磊的博客
04-20 2124
CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，是一把优化项目的利器。 先来说一下各种教程以及文档中CommonsChunkPlugin提及到chunk有哪几种，主要有以下三种： 1.webpack当中配置的入口文件（entry）是chunk，可以理解为entry c...
CommonsChunkPlugin学习小结
weixin_34280237的博客
01-31 315
首先，重要的事情放在开头: Webpack4 下个月就出了，CommonsChunkplugin被干掉了！ Chunk 如果你还有兴趣，那就一起来看看吧。 首先弄明白chunk是什么东西：webpack将多个模块打包之后的代码集合称为chunk。 webpack里, chunk有三种类型: entry chunk: 含有webpack runtime代码的模块代码集合。 normal chunk...
commonChunkplugin配置项详解
热门推荐
高山上的鱼
02-08 1万+
建议在github阅读单入口文件时候不能把引用多次的模块打印到commonChunkPlugin中注意：example1(对应于目录example1，修改webpack.config.js中的配置就可以了，以下例子相同)var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); module.exports
转载之详解CommonsChunkPlugin的配置和用法
小栗子的博客
01-13 2841
详解CommonsChunkPlugin的配置和用法简介CommonsChunkPlugin可配置的属性：实战应用不分离出第三方库和自定义公共模块webpack.config.js：分离出第三方库、自定义公共模块、webpack运行文件webpack.config.js：单独分离出第三方库、自定义公共模块、webpack运行文件抽离webpack运行文件**抽离第三方库和自定义公共模块**第一种方法第二种方法children和async属性浏览器缓存的实现 简介 CommonsChunkPlugin主要是用
关于Webpack CommonsChunkPlugin
猿的计划的博客
04-22 3066
webpack 使用版本3 昨天接到了领导关于首页加载js 文件过大的bug，实际上就是影响了首页加载速度问题 心里想的是有两种解决办法 1、使用CommonsChunkPlugin 文件拆分 2、使用nginx gzip（这个方法明显很奏效） 先说第一种方法 在minChunks 里面把node_modules里面的js 拆分到commons.js 里面 再有没拆分之前 app.js 里面实际包括了，src 和 node_modules 导致文件非常大 拆分之前可以安装 webpack-b.
matlab中怎么提取公共项,使用CommonsChunkPlugin如何做才能抽取公共模块
weixin_31714129的博客
03-22 254
下面我就为大家分享一篇简单谈谈CommonsChunkPlugin抽取公共模块，具有很的参考价值，希望对大家有所帮助。引言webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分，具体的用法就不做过多介绍，不太了解可以参考webpack官网介绍；该插件是webpack项目常用的一个优化功能，几乎在每个webpack项目中都会用到。使用该插件带...
SUSE Linux网卡配置方法详解
而SUSE Linux作为一种广泛应用于企业级服务器的操作系统，其网络接口（网卡）的配置方法具有典型性和实用性。本文将围绕“SUSE Linux网卡配置”这一主题，深入讲解其相关知识点，涵盖配置原理、配置方式、常用命令、...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值