首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何让splitChunks生成commonjs requires()语句?

splitChunks是webpack中的一个插件,用于将公共的模块提取出来,以减少打包后的文件大小。默认情况下,splitChunks会生成异步加载的代码,即使用import()语句来加载模块。

如果要让splitChunks生成commonjs requires()语句,可以通过配置splitChunks的参数来实现。具体步骤如下:

  1. 在webpack配置文件中,找到splitChunks的配置项,一般是optimization.splitChunks。
  2. 在splitChunks的配置项中,设置chunks参数为'all',表示将所有模块都进行拆分。
  3. 设置enforceSizeThreshold参数为0,表示不对模块大小进行限制。
  4. 设置minChunks参数为1,表示只要一个模块被多个入口引用了,就会被提取出来。
  5. 设置automaticNameDelimiter参数为'_',表示生成的文件名中使用下划线作为分隔符。
  6. 设置cacheGroups参数,用于配置具体的拆分规则。可以根据需要配置多个cacheGroups。
    • 设置test参数为/moduleA/,表示匹配模块路径中包含/moduleA/的模块。
    • 设置name参数为'moduleA',表示生成的文件名为moduleA。
    • 设置priority参数为10,表示优先级为10,数字越大优先级越高。
    • 设置enforce参数为true,表示强制拆分该模块。
    • 设置reuseExistingChunk参数为true,表示如果该模块已经被拆分过,可以复用已有的拆分文件。

配置示例:

代码语言:txt
复制
optimization: {
  splitChunks: {
    chunks: 'all',
    enforceSizeThreshold: 0,
    minChunks: 1,
    automaticNameDelimiter: '_',
    cacheGroups: {
      moduleA: {
        test: /moduleA/,
        name: 'moduleA',
        priority: 10,
        enforce: true,
        reuseExistingChunk: true
      }
    }
  }
}

这样配置后,webpack在打包时会将所有模块中匹配/moduleA/的部分提取出来,生成一个commonjs requires()语句的文件,文件名为moduleA。

腾讯云相关产品推荐:腾讯云云服务器(ECS),产品介绍链接地址:https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

小白入门级!webpack基础、分包大揭秘

我按照自己的方式,通过查阅、整理相关文档,梳理一些比较容易大家纠结的点,大家通过本篇文章,大概了解webpack是干了什么?...目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。 CommonJS NodeJS诞生之后,它使用CommonJS的模块化规范。从此,js模块化开始快速发展。...它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。...,解决编译产物“如何写”的问题,两者合作搭建起webpack搭建主流程。...七、SplitChunksPlugin最佳实战 那么,如何设置最适合项目情况的分包规则呢?

1.5K10
  • webpack高级配置_2023-03-01

    所以导入用require不成功 图片 结论: 摇树只能import,导出用esm和commonjs都可以 因为摇树发生在编译阶段,只支持esm的import,不支持commonjs的require,因为...) splitChunks是webpack配置下optimization下的配置,即优化。...chunk文件,输出文件三者的关系从原来的一个入口文件对应一个chunk最后输出一个bundle文件改变为一个入口文件对应多个chunk最后输出多个bundle文件 三种方式获得chunk 1、入口文件可以生成...chunk,入口文件即webpack配置的entry选项; 2、异步请求 import函数调用 或者 require.ensure 可以生成chunk; 如:import函数即我们在写vue-router.../view/about.vue') 3、webpack配置splitChunks手动拆分生成chunk,最后独立输出到js文件 splitChunks 配置 简单配置,把react相关包都单独提到一个文件

    90620

    webpack高级配置

    所以导入用require不成功图片结论:摇树只能import,导出用esm和commonjs都可以因为摇树发生在编译阶段,只支持esm的import,不支持commonjs的require,因为esm是编译时...)splitChunks是webpack配置下optimization下的配置,即优化。...chunk文件,输出文件三者的关系从原来的一个入口文件对应一个chunk最后输出一个bundle文件改变为一个入口文件对应多个chunk最后输出多个bundle文件三种方式获得chunk1、入口文件可以生成...chunk,入口文件即webpack配置的entry选项;2、异步请求 import函数调用 或者 require.ensure 可以生成chunk;如:import函数即我们在写vue-router时写的异步请求路由方式.../view/about.vue')3、webpack配置splitChunks手动拆分生成chunk,最后独立输出到js文件splitChunks 配置简单配置,把react相关包都单独提到一个文件{

    79620

    「 面试三板斧 」之 代码分割(中)

    背景 接上一篇文章:「 面试三板斧 」之 代码分割(上) 中, 我们分析了配置 splitChunks 不同值后的行为。 本篇我们将深入分析代码分割背后的运行机制。...事实上 nodeJS 也是不支持的,这个问题我在 CommonJS 标准中找到了答案: ? 虽然 CommonJS 通俗地讲是一个同步模块加载规范,但是其中是包含异步加载相关内容的。...接下来的问题是: 如何根据切割点对代码进行切割? 下面举个例子。...最终生成的chunks的结构如下: ? 拼接 output.js 经历重重难关,我们终于来到了最后一步: 如何根据构建出来的 chunks 拼接出若干个 output.js 呢?...仔细 debug 生成的 output.js 应该就能看懂这一点。 模块名字替换为模块 id 的算法有所改进。

    29410

    如何Midjourney生成的卡通头像更像本人?

    接下来静电给大家分享一些小技巧,生成的卡通头像更像真人。 001.如何定义“像”真人这个概念?...002.选择质量更高的原图 模糊的,不清楚,光照条件差,等等原因拍摄的生活照得到的结果并不会太人满意,因此选择合适的图片可以让我们事半功倍。...上传原图,此时建议上传一张原图即可,并得到原图链接(上传后,点击图片并选择从浏览器打开即可得到链接) 004.对Midjourney机器人执行命令 使用/imagine命令后,用Prompt来加入关键词语句...,关键词语句需要对你这张图片进行较为详细的描述,比如人物衣着,面部表情,发型等等细节。...截取人物脸部 在多人照片中,截取原图人物脸的局部可以头像更好的生成,所以我们找到原图,并截取出人的脸部,通过设计工具导出成两张小图。就像下图这样。 009.

    4.1K20

    如何 Mybatis 自动生成代码,提高开发效率

    通过简单的配置, 我们就可以生成各种类型的实体类, Mapper接口, MapperXML文件, Example对象等。通过这些生成的文件, 我们就可以方便的进行单表进行增删改查的操作。...数据库的相关配置(必须要改) 相关表的配置(必须要改) 实体类生成存放的位置。 MapperXML 生成文件存放的位置。 Mapper 接口存放的位置。 如果不知道怎么改, 请看后面的配置详解。... 我想项目为 UTF-8, 如果指定生成 GBK, 则自动生成的中文就是乱码。...2.2.2 plugins 标签 plugins 标签用来扩展或修改代码生成生成的代码。 在生成的 XML 中, 是没有 **** 这个标签的。该标签是配置缓存的。...如果我们想生成这个标签, 那么可以 plugins 中进行配置。

    1.1K30

    刚刚,发布Webpack中级教程系列

    webpack.config.js配置 index.html 模板文件(构建生成的入口页面是以此为模板的): 多页面应用打包 项目中有多个页面,考虑两个基本问题: - 如何自动生成多个页面 - 如果引用中存在公共的模块...: 可以看到在生成html文件时已经为其单独引用了chunks数组中指定的模块,这使得对应的页面生成时只依赖自己需要的脚本。...文件,这样的结果就是在一个网速欠佳的环境下打开你的网站时,用户可能需要面对很长时间的白屏,你很快就会想到将Echarts从主文件中剥离出来,体积较小的主文件先在界面上渲染出一些动画或是提示信息,然后再去加载...技术 参数配置 代码分割实例 单页面应用 单页面应用只有一个入口文件,splitChunks的主要作用是将引用的第三方库拆分出来。...webpack如何识别CommonJs模块 webpack如何识别ES Harmony模块 webpack是一个JS代码模块化的打包工具。 资料官网:www.webpackjs.com

    83910

    如何用Excel快速生成SQL语句,用过的人都说好

    导读:Excel的公式自动生成想必大家都知道了,就是写好一个公式后直接往下拖,就可以将后面数据的公式自动生成。 今天我们就用这个功能来快速生成SQL语句。...02 写好模板语句 我们可以先写一条插入语句,如下: INSERT INTO Person VALUES(1,'吕布',25,'男','13500000001') 然后复制这条SQL语句打开Excel,...03 生成SQL语句 确认后就可以看到在单元格中会自动生成一条SQL语句。选中单元格下拉,会发现所有的行后面都会生成一条SQL语句。 ?...04 执行SQL 然后我们直接复制这些SQL语句到数据库的查询窗口执行。 ? 执行完后我们查询Person表里的数据。 ? 这样就完成了Excel快速生成SQL语句的功能。...当然我们可以使用循环遍历系统中的所有表然后再用循环语句执行指定的语句,如下: --使用循环语句查询所有表的数量 DECLARE TNAME VARCHAR2(200); BEGIN --获取系统表中的所有表名

    15.1K10

    Java中如何解析、格式化、生成SQL语句

    大家好,我是TJ 一个励志推荐10000款开源项目与工具的程序员 昨天在群里看到有小伙伴问,Java里如何解析SQL语句然后格式化SQL,是否有现成类库可以使用?...JSqlParser JSqlParser是一个用Java编写的SQL解析器,可以将SQL语句解析为Java对象,从而使开发人员能够轻松地分析、修改和重构SQL查询。...比如,这样的一句SQL语句SELECT 1 FROM dual WHERE a = bSELECT 1 FROM dual WHERE a = b JSqlParser可以将其解析为如下对象结构  SQL...net.sf.jsqlparser.expression.operators.relational.EqualsTo            ├─Column: a            └─Column: b 然后我们就可以通过其提供的API来访问这句SQL语句中的各个要素...除了解析SQL语句外,JSqlParser还提供了一些有用的功能,例如格式化SQL语句生成SQL查询等。

    87050

    【JS】382- JavaScript 模块化方案总结

    webpack 构建过程中该如何指定打包配置中的模块化参数。...sayHello; // 调用则需要改为 var sayHello = require('module'); sayHello(); require 命令第一次加载该脚本时就会执行整个脚本,然后在内存中生成一个对象...要想模块再次运行,必须清除缓存。 模块加载的顺序,按照其在代码中出现的顺序。 2. AMD CommonJS 规范很好,但是不适用于浏览器环境,于是有了 AMD 和 CMD 两种方案。...它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。...那么如何实现不同环境可兼容的构建呢?

    82630

    webpack4.0各个击破(4)—— Javascript & splitChunk

    webpack使用起来很方便,是因为实现了对各种不同模块规范的兼容处理,对前端开发者来说,理解这种兼容性实现的方式比学习如何配置webpack更为重要。...webpack默认支持的是CommonJs规范,但同时为了扩展其使用场景,webpack在后续的版本迭代中也加入了对ES harmony等其他规范定义模块的兼容处理,具体的处理方式将在下一章《webpack4.0...文件,这样的结果就是在一个网速欠佳的环境下打开你的网站时,用户可能需要面对很长时间的白屏,你很快就会想到将Echarts从主文件中剥离出来,体积较小的主文件先在界面上渲染出一些动画或是提示信息,然后再去加载...细说splitChunks技术 4.1 参数说明 webpack4废弃了CommonsChunkPlugin插件,使用optimization.splitChunks和optimization.runtimeChunk...单页面应用 单页面应用只有一个入口文件,splitChunks的主要作用是将引用的第三方库拆分出来。

    76330
    领券