Webpack中SplitChunksPlugin 配置参数详解

代码分割本身和 webpack 没有什么关系，但是由于使用 webpack 可以非常轻松地实现代码分割，所以提到代码分割首先就会想到使用 webopack 实现。

在 webpack 中是使用 SplitChunksPlugin 来实现的，由于 SplitChunksPlugin 配置参数众多，接下来就来梳理一下这些配置参数。

官网上的默认配置参数如下：

module.exports = {
 //...
 optimization: {
  splitChunks: {
   chunks: 'async', // 代码分割时对异步代码生效，all：所有代码有效，inital：同步代码有效
   minSize: 30000, // 代码分割最小的模块大小，引入的模块大于 30000B 才做代码分割
   maxSize: 0, // 代码分割最大的模块大小，大于这个值要进行代码分割，一般使用默认值
   minChunks: 1, // 引入的次数大于等于1时才进行代码分割
   maxAsyncRequests: 6, // 最大的异步请求数量,也就是同时加载的模块最大模块数量
   maxInitialRequests: 4, // 入口文件做代码分割最多分成 4 个 js 文件
   automaticNameDelimiter: '~', // 文件生成时的连接符
   automaticNameMaxLength: 30, // 自动生成的文件名的最大长度
   cacheGroups: {
    vendors: {
     test: /[\\/]node_modules[\\/]/, // 位于node_modules中的模块做代码分割
     priority: -10 // 根据优先级决定打包到哪个组里，例如一个 node_modules 中的模块进行代码
    }, // 分割，，既满足 vendors，又满足 default，那么根据优先级会打包到 vendors 组中。
    default: { // 没有 test 表明所有的模块都能进入 default 组，但是注意它的优先级较低。
     priority: -20, // 根据优先级决定打包到哪个组里,打包到优先级高的组里。
     reuseExistingChunk: true // //如果一个模块已经被打包过了,那么再打包时就忽略这个上模块
    }
   }
  }
 }
};

补充几点：

在分组中可以人为地规定打包后文件的名字，在 vendor 分组中添加 filename = "vendor.js" 之后，在 vendor 分组中打包后文件的名字都是 vendor.js 。

reuseExistingChunk  实例讲解：

// a.js
import b from './b';

// index.js
import a from './a';
import b from './b';

在上述代码中，index.js 在执行 import a from './a' 时引入 a 模块，由于 a 模块中使用了 b 模块，所以同时也引入了 b 模块。再执行 import b from './b' 时，由于 b 模块已经被打包过了，所以就会忽略掉这个 b 模块，这就是 reuseExistingChunk: true 的作用。

如果想让两个模块打包到一个文件里应该如何实现？

cacheGroup 就可以实现这个需求，假设有两个模块 module1 和 module2，且都满足 vendor 这个组，那么在进行代码分割时，会先将 module1 放到 CacheGroup 中，然后再将 module2 放到 cacheGroup 中，最后再将两者一起放到 vender 组里生成 vender.js 文件。

到此这篇关于Webpack中SplitChunksPlugin 配置参数详解的文章就介绍到这了,更多相关Webpack SplitChunksPlugin 配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈webpack SplitChunksPlugin实用指南

    浅谈webpack SplitChunksPlugin实用指南

    提到前端打包工具,毫无疑问想先到的是webpack.但是前端发展地很快,时不时会有新东西出现,打包工具这边之前也出现parcel和rollup.各种工具的碰撞,相互汲取优点,促进技术的发展. webpack4中支持了零配置的特性,同时对块打包也做了优化, CommonsChunkPlugin 已经被移除了,现在是使用 optimization.splitChunks 代替. 下面就开始介绍splitChunks的内容. 默认情况 首先webpack会根据下述条件自动进行代码块分割: 新代码块可以

  • 详解webpack4之splitchunksPlugin代码包分拆

    本文讲解的是最近在做的一个多页面项目,结合webpack4的splitChunks进行代码包分拆的过程 项目框架 项目有home和topic两个入口文件,主要包括: react.mobx.antd作为项目的基本框架, echarts和d3(画图)是项目中部分页面用到比较大的组件库 src下的工作的组件和代码 其他的非公共代码. 两个入口文件都用react-loadable做了异步加载 import Loadable from 'react-loadable'; ... const Loadabl

  • webpack4之SplitChunksPlugin使用指南

    写在前面 前面写了一篇有关webpack4的不完全升级指南以及在webpack3.x迁移的时候遇到的问题,有兴许可以看一下. 0. 参数介绍 先对参数有一个大概的认识,虽然撸了很多遍官方的更新文档,但是还是去参看了一下新的wbepack源码,下面是各种参数及含义: chunks: 表示显示块的范围,有三个可选值:initial(初始块).async(按需加载块).all(全部块),默认为all; minSize: 表示在压缩前的最小模块大小,默认为0: minChunks: 表示被引用次数,默认

  • Webpack中SplitChunksPlugin 配置参数详解

    代码分割本身和 webpack 没有什么关系,但是由于使用 webpack 可以非常轻松地实现代码分割,所以提到代码分割首先就会想到使用 webopack 实现. 在 webpack 中是使用 SplitChunksPlugin 来实现的,由于 SplitChunksPlugin 配置参数众多,接下来就来梳理一下这些配置参数. 官网上的默认配置参数如下: module.exports = { //... optimization: { splitChunks: { chunks: 'async'

  • webpack介绍使用配置教程详解

    目录 一.webpack介绍 1.由来 2.介绍 3.作用 4.拓展说明 5.webpack整体认知 二.webpack安装 1.安装node 2.安装cnpm 3.安装nrm的两种方法 4.安装webpack 三.webpack配置 0.搭建项目结构 1.初始化一个项目(会创建一个package.json文件) 2.在当前的项目中安装Webpack作为依赖包 3.当前项目结构 4.实现CSS打包 5.实现SCSS打包 6.实现Less打包 7.实现打包url资源(图片.gif.图标等)功能 8

  • Vue 中axios配置实例详解

    1.GET 请求 //向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 也可以通过 params 对象传递参数 axios.get('/user', { params: { ID: 12345 } }) .then(function (respons

  • OpenCV中findContours函数参数详解

    OpenCV中findContours函数参数详解

    注: 这篇文章用的OpenCV版本是2.4.10, 3以上的OpenCV版本相关函数可能有改动 Opencv中通过使用findContours函数,简单几个的步骤就可以检测出物体的轮廓,很方便.这些准备继续探讨一下findContours方法中各参数的含义及用法,比如要求只检测最外层轮廓该怎么办?contours里边的数据结构是怎样的?hierarchy到底是什么鬼?Point()有什么用? 先从findContours函数原型看起: findContours( InputOutputArray

  • Jquery中$.ajax()方法参数详解

    俗说好记性不如个烂笔头,下面是jquery中的ajax方法参数详解,这里整理了一些供大家参考. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async:

  • Hybris在idea中debug配置方法详解

    1.启动hybris服务的命令用 hybrisserver.bat debug 2.在idea中配置remote debug 端口号默认不变选择所要监听的服务(如下图) 点击小爬虫启动debug服务访问接口时,即可用debug调试程序了! 总结 到此这篇关于Hybris在idea中debug配置方法详解的文章就介绍到这了,更多相关Hybris在idea中debug配置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • C/C++在VScode中的配置教程详解

    C/C++在VScode中的配置教程详解

    注意 这篇文章是在VScode中配置的,你想要的功能,它基本都有,你只要去安装插件就好了.在编辑器中如何添加C/C++的配置呢,下面我们来介绍一下: 1.安装C/C++ 工具在商量中直接搜就好,一般选择列表中的第一个. 2.配置环境 这一步就是需要你的电脑上需要有C/C++的语言环境.主要分为两个部分: 第一步是下载MinGW,第二部就是配置环境,这里可以参考 网上教程: C配置. 将bin目录的路径(最好不要有中文),复制到用户路径变量中(我的电脑->属性–>高级系统设置). 最后,需要验证

  • Java的MyBatis框架中关键的XML字段映射的配置参数详解

    Java的MyBatis框架中关键的XML字段映射的配置参数详解

    properties 这些是外部化的,可替代的属性,这些属性也可以配置在典型的Java属性配置文件中,或者通过properties元素的子元素来传递.例如: <properties resource="org/mybatis/example/config.properties"> <property name="username" value="dev_user"/> <property name="pas

  • Webpack中publicPath路径问题详解

    Webpack中publicPath路径问题详解

    最近自己在搭建一个基于webpack的react项目,遇到关于output.publicPath和webpack-dev-server中publicPath的问题,而官方文档对它们的描述也不是很清楚,所以自己研究了下并写下本文记录. output output选项指定webpack输出的位置,其中比较重要的也是经常用到的有 path 和 publicPath output.path 默认值: process.cwd() output.path 只是指示输出的目录,对应一个 绝对路径 ,例如在项目

  • Python中的默认参数详解

    文章的主题 不要使用可变对象作为函数的默认参数例如 list,dict,因为def是一个可执行语句,只有def执行的时候才会计算默认默认参数的值,所以使用默认参数会造成函数执行的时候一直在使用同一个对象,引起bug. 基本原理 在 Python 源码中,我们使用def来定义函数或者方法.在其他语言中,类似的东西往往只是一一个语法声明关键字,但def却是一个可执行的指令.Python代码执行的时候先会使用 compile 将其编译成 PyCodeObject. PyCodeObject 本质上依然

随机推荐