webpack3的CommonsChunkPlugin插件详解

webpack打出来的包在不做处理的情况下是非常大的，所有依赖都被塞进一个文件中，文件中有业务代码，有业务代码依赖的第三方库代码，还有webpack生成的运行时代码等。这样的一个文件不方便静态资源缓存，并且初始化页面的时候下载了所有的JS这是没必要的，拖慢了页面速度。所以对于webpack打包的资源文件进行分割按需加载是很重要的一件事情。

webpack4都出来了为啥要写一篇关于webpack3的文章。

目前webpack3应用的还是很多，并且学习相关知识协查找过相关资料很多遍，所以这次总结一下通过webpack3分割代码的方法，方便后期需要的时候方便查阅。

在webpack3中使用的分割thunk方法主要是使用webpack自带的插件（webpack.optimize.CommonsChunkPlugin）实现的。

首先通过webpack来构建项目

目录结构：

|— src

​ |— index.html

​ |— indexa.js

​ |— indexb.js

|— webpack.config.js

|— node_modules

​ |— jquery/

indexa.js

import $ from 'jquery'$() // 调用一下console.log('我是indexa.js')

indexb.js

import $ from 'jquery'$() // 调用一下console.log('我是indexb.js')

webpack.config.js

// output中的path需要绝对路径
let path = require('path')
// 用于将打包的js文件注入到html文件中
let HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: {indexa: './src/indexa.js',indexb: './src/indexb.js'},output: {path: path.resolve('./dist/'),filename: '[name].[chunkHash].js'},plugins: [new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})]
}

上面的示例中有两个入口，一个是pagea.js，另一个是pageb.js。这两个入口都引入了jquery.js，并且打包结果中我们看到jquery.js被同时打到了两个入口文件中。

在这里插入图片描述

提取公共第三方库jquery

这样的结果显然不是我们期望的，我们期望两个入口都引入的jquery被打到单独的包中，然后在两个入口引入这个包即可。这就需要借助webpack.optimize.CommonsChunkPlugin插件，下面修改webpack.config.js文件为：

// output中的path需要绝对路径
let path = require('path')
// 用于将打包的js文件注入到html文件中
let HtmlWebpackPlugin = require('html-webpack-plugin')
let webpack = require('webpack')
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPluginmodule.exports = {entry: {indexa: './src/indexa.js',indexb: './src/indexb.js',jquery: ['jquery'] // 依赖的第三方库node_modules中},output: {path: path.resolve('./dist/'),filename: '[name].[chunkHash].js'},plugins: [new CommonsChunkPlugin({name: 'jquery', // 如果有该名称的chunk则选择这个chunk提取公共文件，这里是jquery，如果没有则生成的文件是这个名称的chunk}),new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})]
}

通过CommonsChunkPlugin插件我们提取了在indexa和indexb中都引入的jquery库这样打包结果中pagea.js和pageb.js就大幅减小了。

在这里插入图片描述

提取自定义公共模块

通常我们不止有第三方的公共模块，我们自己也会写一些公用的工具方法。现加入公用工具方法文件utils.js。

utils.js

function common () {console.log('我是工具方法')
}export {common
}

修改pagea.js文件

import $ from 'jquery'
import {common} from './utils.js'common() // 新加的$() // 调用一下console.log('我是indexa.js')

修改pageb.js文件

import $ from 'jquery'
import {common} from './utils.js'common() // 新加的$() // 调用一下console.log('我是indexb.js')

打包后发现自己的公共方法文件被打包到了jquery……js文件中了，我们并不希望这样，因为第三方库一般是不会修改的，我们希望每次打包第三方库的名称不变，这样有助于客户端缓存。所以我们需要从当前的jquery…js中提取出自己的公共方法文件。

在这里插入图片描述

分离utils.js文件和jquery等第三方库文件

  1. 修改webpack.config.js
// output中的path需要绝对路径
let path = require('path')
// 用于将打包的js文件注入到html文件中
let HtmlWebpackPlugin = require('html-webpack-plugin')
let webpack = require('webpack')
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPluginmodule.exports = {entry: {indexa: './src/indexa.js',indexb: './src/indexb.js',jquery: ['jquery'] // 依赖的第三方库node_modules中},output: {path: path.resolve('./dist/'),filename: '[name].[chunkHash].js'},plugins: [new CommonsChunkPlugin({name: 'jquery', // 如果有该名称的chunk则选择这个chunk提取公共文件，这里是jquery，如果没有则生成的文件是这个名称的chunkminiChunks: Infinity // 这样就只会打包出自身chunk和 webpack生成的一些文件}),new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})]
}

通过打包结果发现我们自定义的模块确实从jquery中提取了出来，但是却打到了每个引入的页面中，这也是我们接受不了的。

在这里插入图片描述

  1. 从单个页面中分离公共方法

修改webpack.config.js文件如下：

// output中的path需要绝对路径
let path = require('path')
// 用于将打包的js文件注入到html文件中
let HtmlWebpackPlugin = require('html-webpack-plugin')
let webpack = require('webpack')
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPluginmodule.exports = {entry: {indexa: './src/indexa.js',indexb: './src/indexb.js',jquery: ['jquery'] // 依赖的第三方库node_modules中},output: {path: path.resolve('./dist/'),filename: '[name].[chunkHash].js'},plugins: [new CommonsChunkPlugin({name: 'jquery', // 如果有该名称的chunk则选择这个chunk提取公共文件，这里是jquery，如果没有则生成的文件是这个名称的chunkminChunks: Infinity // 这样就只会打包出自身chunk和 webpack生成的一些文件}),new CommonsChunkPlugin({name: 'utils',chunks: ['indexa', 'indexb']}),new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})]
}

打包结果如下，可以发现utils被提取了出来，这样就我们的目的就达到了。

在这里插入图片描述

minChunks的函数值

我们发现第三方库我们是通过entry字段手动添加的，这样比较麻烦，不能以后添加一个第三方库我们就手动修改一下entry的jquery数组。

我们可以通过minChunks的值传入一个函数来做，函数返回true则会被打包。修改webpack.config.js文件如下：

// output中的path需要绝对路径
let path = require('path')
// 用于将打包的js文件注入到html文件中
let HtmlWebpackPlugin = require('html-webpack-plugin')
let webpack = require('webpack')
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPluginmodule.exports = {entry: {indexa: './src/indexa.js',indexb: './src/indexb.js',// 已经不需要了 jquery: ['jquery'] // 依赖的第三方库node_modules中},output: {path: path.resolve('./dist/'),filename: '[name].[chunkHash].js'},plugins: [new CommonsChunkPlugin({name: "vendor", // 修改jquery名称为vendor，第三方库集合minChunks: function (module, ) {// node_modules中出来的都打到这个文件中return module.context && module.context.includes("node_modules");}}),new CommonsChunkPlugin({name: 'utils',chunks: ['indexa', 'indexb']}),new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})]
}

打包结果如下，只是将jquery…js的名称换成了vendor…js其他没有任何变化。

在这里插入图片描述

让moduleId固定下来

通过上面两张截图的观察我们可以发现indexb…js的chunkHash不一样了，但是我们并没有修改文件内容。这是因为webpack生成模块的moduleId在变化。让moduleId停止变化的插件有两个，一个是HashedModuleIdsPlugin，还有一个是NamedModulesPlugin。

HashedModuleIdsPlugin: 该插件会根据模块的相对路径生成一个四位数的hash作为模块id, 建议用于生产环境。

NamedModulesPlugin: 当开启 HMR 的时候使用该插件会显示模块的相对路径，建议用于开发环境。

我们就选择生产环境用的插件，修改webpack.config.js文件如下：

// output中的path需要绝对路径
let path = require('path')
// 用于将打包的js文件注入到html文件中
let HtmlWebpackPlugin = require('html-webpack-plugin')
let webpack = require('webpack')
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPluginmodule.exports = {entry: {indexa: './src/indexa.js',indexb: './src/indexb.js',// 已经不需要了 jquery: ['jquery'] // 依赖的第三方库node_modules中},output: {path: path.resolve('./dist/'),filename: '[name].[chunkHash].js'},plugins: [new CommonsChunkPlugin({name: "vendor", // 修改jquery名称为vendor，第三方库集合minChunks: function (module) {// node_modules中出来的都打到这个文件中return module.context && module.context.includes("node_modules");}}),new CommonsChunkPlugin({name: 'utils',chunks: ['indexa', 'indexb']}),// 固定下来模块的moduleIdnew HashedModuleIdsPlugin(),new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})]
}

runtime和manifest

其实vender中不止有node_module文件夹中的包，还包括

runtime: 指在浏览器运行时，webpack 用来连接模块化的应用程序的所有代码。其中包含：在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。

manifest: 当编译器(compiler)开始执行、解析和映射应用程序时，它会保留所有模块的详细要点。这个数据集合称为 “Manifest”，当完成打包并发送到浏览器时，会在运行时通过 Manifest 来解析和加载模块。无论你选择哪种模块语法，那些 import 或 require 语句现在都已经转换为 __webpack_require__ 方法，此方法指向模块标识符(module identifier)。通过使用 manifest 中的数据，runtime 将能够查询模块标识符，检索出背后对应的模块。

当模块做出改变的时候manifest也会改变，同时也会导致vender改变，最后导致vender的缓存失效，这种失效并不是因为vender本身内容的改变导致的，所以我们需要分离runtime和manifest。

提取runtime和manifest

修改webpack.config.js文件如下：

// output中的path需要绝对路径
let path = require('path')
// 用于将打包的js文件注入到html文件中
let HtmlWebpackPlugin = require('html-webpack-plugin')
let webpack = require('webpack')
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPluginmodule.exports = {entry: {indexa: './src/indexa.js',indexb: './src/indexb.js'},output: {path: path.resolve('./'),filename: '[name].[chunkHash].js'},plugins: [new CommonsChunkPlugin({name: "vendor", // 修改jquery名称为vendor，第三方库集合minChunks: function (module) {// node_modules中出来的都打到这个文件中return module.context && module.context.includes("node_modules");}}),new CommonsChunkPlugin({name: 'utils',chunks: ['indexa', 'indexb']}),new CommonsChunkPlugin({name: 'manifest',minChunks: Infinity}),// 固定下来模块的moduleIdnew HashedModuleIdsPlugin(),new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})]
}

在这里插入图片描述

children字段和async字段的作用

children和async作用于动态加载模块。如果没有设置children，那么在动态引入的多个脚本中公用的部分并不会被提取出来。如果设置了childrend: true，则公共部分会被提取到主脚本中。进一步设置async字段，那么提取出来的公共部分不会在主脚本中，而会生成一个单独文件异步引入。

如果动态引入脚本和主脚本有公共的部分，那么及时没有设置children和async字段也会被提取。

为了去除上面的干扰重建目录。

|— src|— index.html|— index.js|— child1.js|— child2.js|— webpack.config.js|— node_modules|— jquery/

index.js

改文件为主脚本，会动态引入两个脚本child1.js和child2.js

require.ensure(['./child1.js'], function () {
})require.ensure(['./child2.js'], function () {
})

child1.js

import $ from 'jquery'
import {common} from './utils.js'$()
common()console.log('我是child1.js')

child2.js（和child1.js内容相同）

import $ from 'jquery'
import {common} from './utils.js'$()
common()console.log('我是child2.js')

webpack.config.js

先正常打包，观察结果。

// output中的path需要绝对路径
let path = require('path')
// 用于将打包的js文件注入到html文件中
let HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: {index: './src/index.js'},output: {path: path.resolve('./'),filename: '[name].[chunkHash].js',chunkFilename: '[name].[chunkHash].js'},plugins: [new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})]
}

下图我们可以看出除了index.js还多了两个js，这两个就是通过动态加载引入的js被单独打包了，并且这两个js中公共的部分并没有被提取。还可以注意到这时候index.js是很小的。

在这里插入图片描述

提取异步加载的js中公共部分

// output中的path需要绝对路径
let path = require('path')
// 用于将打包的js文件注入到html文件中
let HtmlWebpackPlugin = require('html-webpack-plugin')
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPluginmodule.exports = {entry: {index: './src/index.js'},output: {path: path.resolve('./'),filename: '[name].[chunkHash].js',chunkFilename: '[name].[chunkHash].js'},plugins: [new CommonsChunkPlugin({children: true}),new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})]
}

添加children选项之后：

在这里插入图片描述

动态引入进来的文件的公共部分被提取到主块中了。两个动态引入文件的尺寸减小并且主脚本的尺寸变大了。

将动态引入的部分单独打包

// output中的path需要绝对路径
let path = require('path')
// 用于将打包的js文件注入到html文件中
let HtmlWebpackPlugin = require('html-webpack-plugin')
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPluginmodule.exports = {entry: {index: './src/index.js'},output: {path: path.resolve('./'),filename: '[name].[chunkHash].js',chunkFilename: '[name].[chunkHash].js'},plugins: [new CommonsChunkPlugin({children: true,async: true}),new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})]
}

我们可以看到index.js文件又减小了并且多了一个文件。

在这里插入图片描述

以上就是我理解的CommonsChunkPlugin插件中children和async的用法。

关于自定义动态引入脚本打包的名字可参考webpack中实现按需加载

注：

hash：一个随机值，每次打包都会改变，建议用于开发。

chunkHash： 根据文件内容生成一个随机值，建议用于生产便于缓存。

Infinity：创建一个公共chunk，但是不包含任何模块，内部是一些webpack生成的runtime代码和chunk自身包含的模块（如果chunk存在的话）。

多CommonsChunkPlugin：第二次使用CommonsChunkPlugin插件的时候如果不指定chunks默认针对前一个CommonsChunkPlugin插件生成的chunk做提取。

children部分主脚本：引入异步脚本的脚本。

总结：

  1. node_modules中第三方库的提取可以通过miniChunks传入function来控制。
  2. 分离之后chunkHash还会变是应为moduleId在改变可以使用插件HashedModuleIdsPlugin来固定下来
  3. manifest和runtime文件提取可以通过miniChunks: Infinity 来完成
  4. children字段设置为true，提取异步引入子文件的公共部分到主文件中
  5. async字段配合children字段使用，提取异步引入子文件的公共部分到单独文件中

参考

webpack4：连奏中的进化

Webpack4之SplitChunksPlugin规则

详解CommonsChunkPlugin的配置和用法

CommonsChunkPlugin中children和async属性详解

Webpack2中的NamedModulesPlugin与HashedModuleIdsPlugin

runtime和manifest

hashed-module-ids-plugin

NamedModulesPlugin

webpack中ensure方法和CommonsChunkPlugin中的children选项

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/362119.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

详细介绍jQuery.outerWidth() 函数具体用法

详细介绍jQuery.outerWidth() 函数具体用法

outerWidth()函数用于设置或返回当前匹配元素的外宽度。外宽度默认包括元素的内边距(padding)、边框(border)，但不包括外边距(margin)部分的宽度。你也可以指定参数为true，以包括外边距(margin)部分的宽度。如下图： 如果你要获取其它情况的宽…
阅读更多...
自动装箱

自动装箱

自Java 1.5起，所有Java开发人员都可以使用自动装箱功能。嗯，我可能太乐观了。 至少所有开发人员都应该可以使用自动装箱。 毕竟，在ORACLE页面上有一个很好的教程。 自动装箱是Java编译器在需要时自动从原始类型创建代码创建对象的代码时的现…
阅读更多...
SQLite 入门教程（一）基本控制台（终端）命令

SQLite 入门教程（一）基本控制台（终端）命令

一、基本简介 SQLite 是一个自持的（self-contained）、无服务器的、零配置的、事务型的关系型数据库引擎。因为他很小，所以也可以作为嵌入式数据库内建在你的应用程序中。SQLite 被应用在 Solaris 10操作系统、Mac OS 操作系统、iPhone 和 Sky…
阅读更多...
PHP中的session

PHP中的session

1.1原理 1.session是服务器端的技术 2.session是基于cookie技术的 1.2session操作 1.默认情况下，会话不会自动开启，通过session_start()开启会话 2.通过session_id()获取会话的编号 3、通过$_SESSION操作会话 4、会话可以保存除了资源以外的所有类型…
阅读更多...
Web前端开发css基础样式总结

Web前端开发css基础样式总结

颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间 一般都用16进制表示颜色 单位 1. px像素（Pixel）。像素,与分辨率…
阅读更多...
nth-child(n)和nth-of-type(n)

nth-child(n)和nth-of-type(n)

:nth-child(n)&#xff1a;父元素的子元素的第n个 :nth-of-type(n)&#xff1a;父元素的 某类 子元素的第n个 注&#xff1a;n从0起&#xff0c;元素index从1起 nth-child(n)和nth-of-type(n)例&#xff1a; <head><style>body :nth-child(2) {height: 30px;ba…
阅读更多...
Spring WebApplicationInitializer和ApplicationContextInitializer的混淆

Spring WebApplicationInitializer和ApplicationContextInitializer的混淆

我偶尔会混淆这两个概念-WebApplicationInitializer和ApplicationContextInitializer&#xff0c;并希望描述它们中的每一个&#xff0c;以便为我自己澄清它们。 我以前在这里写过有关WebApplicationInitializer的博客。 它仅在符合Servlet 3.0规范的Servlet容器中相关&#x…
阅读更多...
Mysql修改binlog日志过期时间

Mysql修改binlog日志过期时间

1.临时生效 # 查看默认设置的过期时间 show variables like "%expire_logs%"; # 设置保留15天 set global expire_logs_days15 # 刷新日志 flush logs&#xff1b; #查看新生成的binlog日志 show master status\G: 注意&#xff1a;以上命令在数据库执行会立即生效&a…
阅读更多...
提高CSS文件可维护性的五种方法

提高CSS文件可维护性的五种方法

当完成一项前端的工作之后&#xff0c;许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型&#xff0c;在余下的时间里还有不断的维护工作&#xff0c;而这些工作也许不会是你自己完成。所以&#xff0c;结构优良的代码能很大程度上优化它的可维护性。下面列出…
阅读更多...
什么是spring（转载）

什么是spring（转载）

spring是一个开源的java框架&#xff0c;集成了各种主流的技术包括web mvc&#xff0c;orm&#xff0c;ejb&#xff0c;rmi&#xff0c;javamail等 &#xff0c;他就象一个粘合济&#xff0c;在实际项目中&#xff0c;将前后台程序粘合在一起&#xff0c;构建出一个完整的系统。…
阅读更多...
小程序小知识备忘

小程序小知识备忘

setData和React的setState一样是异步的吗&#xff1f; setData不是异步的&#xff0c;但是setData之后UI更新是异步的。因为逻辑层&#xff08;App Service&#xff09;和 视图层&#xff08;View&#xff09;是分开的。setData的第二个参数是UI更新后的回调。 组件中this.da…
阅读更多...
记录您的里程和社区运行情况：Java EE 7真实体验

记录您的里程和社区运行情况：Java EE 7真实体验

miles2run.org是跟踪跑步活动并与亲朋好友共享的简便方法。 可以创建然后跟踪基于天或基于距离的目标。 它还允许创建社区运行目标&#xff0c;并使多个跑步者参与并跟踪他们朝着该目标的活动。 您也可以找出本地跑步者并与他们联系。 该项目已开始&#xff0c;以帮助跟踪#Jav…
阅读更多...
poj 1308 Is It A Tree?

poj 1308 Is It A Tree?

// 题意: 给出一些边&#xff0c;由所给出的边能否构成一棵树.&#xff08;节点数<100&#xff09;// 思路: n个顶点的树具有3个特点:连通,不含环,恰好包含n-1条边.只要有任意两个,就能推导出第3个// 所以我们可以通过是否连通和不含环来判断可以构成树.// 不含环: 通过并查…
阅读更多...
oracle在group by时某列有多个值的拼接

oracle在group by时某列有多个值的拼接

最近编码过程中出现了group by后&#xff0c;某些列会有多个值&#xff0c;而我需要把这些多个值的列进行拼接的情况&#xff0c;和大家分享一下。 有如下表student&#xff1a; 我们希望以class分组&#xff0c;每组的信息平铺&#xff0c;效果如下 分组首先想到的肯定是group…
阅读更多...
自求

自求

最近在写代码的时候发现了一个问题&#xff0c;总是在完成一个复杂的逻辑后不自信&#xff0c;不自信逻辑没有问题或者说没有其他问题。仔细注意这种感觉是怎么来的就会发现&#xff0c;在梳理完逻辑写代码的时候总也会出现一些小问题&#xff0c;这些小问题的出现和处理就是问…
阅读更多...
在Spring中使用Asciidoctor：使用Spring MVC渲染Asciidoc文档

在Spring中使用Asciidoctor：使用Spring MVC渲染Asciidoc文档

Asciidoc是一种基于文本的文档格式&#xff0c;因此如果要将文档提交到版本控制系统中并跟踪不同版本之间的更改&#xff0c;它非常有用。 这使Asciidoc成为编写书籍&#xff0c;技术文档&#xff0c;常见问题解答或用户手册的理想工具。 创建Asciidoc文档后&#xff0c;很可能…
阅读更多...
移动端meta整理

移动端meta整理

<!doctype html><html><head><meta charset"utf-8"><meta http-equiv"X-UA-Compatible" content"IEedge,chrome1" /><!-- 默认使用最新浏览器 --><meta http-equiv"Cache-Control" content&qu…
阅读更多...
字符数组和字符串的小细节

字符数组和字符串的小细节

目录 1. 背景知识2. 指向字符串的指针2.1 代码A2.2 代码B2.3 结论3. 字符数组3.1 代码C3.2 总结4. 拓展1. 背景知识 1、字符串就是一个地址。 2. 指向字符串的指针 2.1 代码A const char *a "unix"; char *b "hello";pritnf("%s \n", a); a b…
阅读更多...
POJ1459-Power Network

POJ1459-Power Network

转载请注明出处&#xff1a;優YoU http://user.qzone.qq.com/289065406/blog/1299339754 提示&#xff1a;BFS找增广链 压入重标法 解题思路&#xff1a;多源多汇最大流问题题目给出很多都是废话&#xff0c;特别是符号s(u)&#xff0c;d(u)&#xff0c;Con还有那条公式都别管…
阅读更多...
http强缓存在firefox和chrome之间的差异

http强缓存在firefox和chrome之间的差异

最近回顾HTTP缓存知识的时候发现了一个问题&#xff0c;设置了强缓存和协商缓存的文件&#xff0c;点击浏览器的刷新按钮的时候在chrome和firefox中的表现不一样。具体表现为chrome走强缓存没有再次发起请求。firefox却在强缓存没有失效的情况下发了请求&#xff0c;返回了304走…
阅读更多...
最新文章

Copyright @ 2022~2023