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

Webpack 4 splitChunks生成多个css

Webpack 4是一个现代化的JavaScript模块打包工具,用于将多个JavaScript文件和其他资源(如CSS、图片等)打包成一个或多个最终部署的文件。splitChunks是Webpack 4中的一个功能,用于将共享的代码块(如第三方库或公共模块)提取出来,以便在多个入口文件之间共享和复用。

具体来说,splitChunks可以将多个入口文件中重复的模块提取出来,生成一个单独的文件,以减少重复加载和提高页面加载速度。它可以根据一些配置选项来决定哪些模块应该被提取,以及如何命名和输出这些提取出来的文件。

splitChunks的配置选项包括:

  1. chunks:指定需要提取的模块类型,默认为async,表示只提取异步加载的模块。还可以设置为initial(提取初始加载的模块)或all(提取所有模块)。
  2. minSize:指定模块的最小大小(以字节为单位),只有大于该大小的模块才会被提取,默认为30000。
  3. maxSize:指定模块的最大大小(以字节为单位),如果一个模块的大小超过该值,将会被拆分成更小的模块,默认为0,表示不限制大小。
  4. minChunks:指定一个模块被引用的最小次数,只有被引用次数超过该值的模块才会被提取,默认为1。
  5. maxAsyncRequests:指定异步加载的模块并行请求的最大数量,默认为5。
  6. maxInitialRequests:指定初始加载的模块并行请求的最大数量,默认为3。
  7. automaticNameDelimiter:指定提取出的文件名的连接符,默认为~。
  8. name:指定提取出的文件名,默认为true,表示根据模块名和缓存组键值自动生成文件名。
  9. cacheGroups:用于配置缓存组,可以根据一些规则将模块分组,以便更好地控制提取的行为。

splitChunks的应用场景包括:

  1. 提取第三方库:将多个入口文件中共享的第三方库(如React、Vue等)提取出来,以便在多个页面之间共享和复用,减少重复加载。
  2. 提取公共模块:将多个入口文件中共享的业务逻辑模块提取出来,以便在多个页面之间共享和复用,减少重复加载。
  3. 异步加载优化:将异步加载的模块按需提取,减少初始加载的文件大小,提高页面加载速度。

对于Webpack 4的splitChunks功能,腾讯云提供了一系列相关产品和服务,包括:

  1. 腾讯云CDN(内容分发网络):用于加速静态资源的分发和访问,可以将提取出的CSS文件和其他静态资源缓存到全球各地的边缘节点,提高用户访问速度。详情请参考:腾讯云CDN产品介绍
  2. 腾讯云对象存储(COS):用于存储和管理大规模的非结构化数据,可以将提取出的CSS文件和其他静态资源上传到COS进行存储和分发。详情请参考:腾讯云对象存储产品介绍
  3. 腾讯云云服务器(CVM):用于提供可扩展的计算能力,可以部署和运行Webpack打包后的文件,以及其他后端服务。详情请参考:腾讯云云服务器产品介绍
  4. 腾讯云容器服务(TKE):用于提供容器化的应用部署和管理,可以将Webpack打包后的文件打包成容器镜像,并在TKE上进行部署和管理。详情请参考:腾讯云容器服务产品介绍

以上是关于Webpack 4 splitChunks生成多个CSS的完善且全面的答案,希望能对您有所帮助。

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

相关·内容

webpack 4 Code Splitting 的 splitChunks 配置探索

webpack 4 Code Splitting 的 splitChunks 配置探索 webpack 4 废弃了之前的不怎么好用的 CommonsChunk,取而代之的是 SplitChunks。...Code Splitting 首先 webpack 总共提供了三种办法来实现 Code Splitting,如下: 入口配置:entry 入口使用多个入口文件; 抽取公有代码:使用 SplitChunks...SplitChunks 首先我们所说的 SplitChunks 是由 webpack 4 内置的 SplitChunksPlugin 插件提供的能力,可直接在 optimization 选项中配置,其默认配置如下...chunk 包含的模块已经被抽取出去了,那么将不会重新生成新的。...CSS 配置 同样对于通过 MiniCssExtractPlugin 生成CSS 文件也可以通过 SplitChunks 来进行抽取公有样式等。

2K10

走近webpack4)–css相关拓展

我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求。   ...下面,咱们一起来学学如何用webpack来处理less,sass等预编译器。先看看如何用webpack处理less。   ...不知道大家还记不记的咱们在处理css文件的时候做过一件事情,也就是把css从js中分离出来,因为webpack打包是把css打包进js的,所以我们修改一下loader的配置方式,跟前面的css是一样的,...所以我们可以使用一个插件,在打包的时候自动去除未使用的css样式: /*PurifyCSS-webpack要依赖于purify-css这个包,所以这两个都安装一下,-D是--save-dev的简写,i是...install的简写*/ npm i -D purifycss-webpack purify-css   然后我们引入glod和purifycss-webpack插件: const glob = require

49810

走近webpack4)--css相关拓展

我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求。   ...下面,咱们一起来学学如何用webpack来处理less,sass等预编译器。先看看如何用webpack处理less。   ...不知道大家还记不记的咱们在处理css文件的时候做过一件事情,也就是把css从js中分离出来,因为webpack打包是把css打包进js的,所以我们修改一下loader的配置方式,跟前面的css是一样的,...所以我们可以使用一个插件,在打包的时候自动去除未使用的css样式: /*PurifyCSS-webpack要依赖于purify-css这个包,所以这两个都安装一下,-D是--save-dev的简写,i是...install的简写*/ npm i -D purifycss-webpack purify-css   然后我们引入glod和purifycss-webpack插件: const glob = require

1.1K100

webpack 代码分离快速指北

main.js 如果 main.js 中引入了其他模块,比如引入了 lodash 那么可能会生成一个名为 lodash.chunk.js 文件 基本概念了解了,接下来开始对 js 和 css 文件进行分离的操作...webpack4——SplitChunksPlugin使用指南 module.exports = { entry: { vendor: ["react", "lodash", "angular...会自动在打包过程中 import 这个模块 css 代码分离 css 部分分离代码文件 直接使用 extract-text-webpack-plugin 即可 一个 JS 文件,加载页面时虽然只需要加载一个...多个组件共用一部分样式,如果分离开来,第二个页面就有了 CSS 文件的缓存,访问速度自然会加快 MiniCssExtractPlugin 新版本的 webpack 使用这个插件 注意,在引入样式文件 import...如果有多个入口,想把多个入口引入的样式文件全部打包到一个地方,那么可以使用 optimization 配置项的 splitChunks,所以这个配置项不仅仅只作用于 js,css 也是可以的: optimization

1.1K10

webpack性能优化(2):splitChunks用法详解

一些对于代码分离很有帮助的插件和 loaders:ExtractTextPlugin:用于将CSS从主应用程序中分离出来。bundle-loader:用于分离代码和延迟加载生成的 bundle。...就算你什么配置都不做它也是生效的,源于webpack有一个默认配置,这也符合webpack4的开箱即用的特性。...,那尺寸更大的模块会被拆分出来具体参看《理解webpack4.splitChunks之maxAsyncRequests》splitChunks.minChunks这个配置表示 split 前单个非按需导入的...默认100k    maxSize: 0,//生成的块的最大大小,如果超过了这个限制,大块会被拆分成多个小块。    minChunks: 1,//拆分前必须共享模块的最小块数。    ...之 splitChunks.minChunks https://zhuanlan.zhihu.com/p/110175375理解webpack4.splitChunks https://www.cnblogs.com

1.5K30

webpack性能优化(2):splitChunks用法详解

一些对于代码分离很有帮助的插件和 loaders:ExtractTextPlugin:用于将CSS从主应用程序中分离出来。bundle-loader:用于分离代码和延迟加载生成的 bundle。...就算你什么配置都不做它也是生效的,源于webpack有一个默认配置,这也符合webpack4的开箱即用的特性。...,那尺寸更大的模块会被拆分出来具体参看《理解webpack4.splitChunks之maxAsyncRequests》splitChunks.minChunks这个配置表示 split 前单个非按需导入的...默认100k    maxSize: 0,//生成的块的最大大小,如果超过了这个限制,大块会被拆分成多个小块。    minChunks: 1,//拆分前必须共享模块的最小块数。    ...之 splitChunks.minChunks https://zhuanlan.zhihu.com/p/110175375理解webpack4.splitChunks https://www.cnblogs.com

1.4K20

webpack 学习笔记系列06-打包优化

sunjianfeng@csxiaoyao.com QQ: 1724338257 1. splitChunks 拆分代码 1.1 三种拆分方式 webpack 的三种代码拆分方式: 多 entry 入口配置...使用 import() 或 require.ensure 动态按需加载 webpack4splitChunks 配置取代之前的 CommonsChunkPlugin 1.2 splitChunks...也适用于使用 mini-css-extract-plugin 插件的 css 配置 1.2.1 chunks 可选值:async(默认) | initial | all(推荐),针对下面的 a.js...魔法注释 import(/* webpackChunkName: "react" */ 'react'); // 可以设置生成的 bundle 名称 使用 webpack-bundle-analyzer...需要单独为 dll 文件创建一个配置文件,通过 DLLPlugin 插件将第三方依赖打包到 bundle 文件,并生成 manifest.json 文件,在项目的 webpack 配置文件中使用 DllReferencePlugin

1.8K201

webpack4 新特性

目前来说 webpack4 已经趋于稳定,很多关键的插件也都更新了对 webpack4 的支持;更为重要的是,webpack4 的官方文档(中英文)已经很完善了,因此现在不学习 webpack4,更待何时...由于 webpack4 以后对 css 模块支持的逐步完善和 commonChunk 插件的移除,在处理 css 文件提取的计算方式上也做了些调整。...使用 optimization.splitChunks 进行分包 webpack4 移除 CommonsChunkPlugin,取而代之的是两个新的配置项(optimization.splitChunks...为了满足后面两个条件,webpack 有可能受限于包的最大数量值,生成的代码体积往上增加。...一个模块可以被分配到多个缓存组,优化策略会将模块分配至跟高优先级别(priority)的缓存组,或者会分配至可以形成更大体积代码块的组里。 默认来说,缓存组会继承 splitChunks 的配置。

1.1K20

webpack高级配置_2023-03-01

splitChunkswebpack配置下optimization下的配置,即优化。...看单词理解意思就是拆分多个chunk。 什么是chunk webpack的本质是把多个js模块合并到一个js中,即一个入口得到一个输出js文件(bundle.js)。...1、入口文件可以生成chunk,入口文件即webpack配置的entry选项; 2、异步请求 import函数调用 或者 require.ensure 可以生成chunk; 如:import函数即我们在写.../view/about.vue') 3、webpack配置splitChunks手动拆分生成chunk,最后独立输出到js文件 splitChunks 配置 简单配置,把react相关包都单独提到一个文件...原因是不论css、vue、react的loader都帮我们自动加了这句。 css有style-loader,react有react-hot-loader,vue有vue-loader。

88020

webpack高级配置

splitChunkswebpack配置下optimization下的配置,即优化。...看单词理解意思就是拆分多个chunk。什么是chunkwebpack的本质是把多个js模块合并到一个js中,即一个入口得到一个输出js文件(bundle.js)。...、入口文件可以生成chunk,入口文件即webpack配置的entry选项;2、异步请求 import函数调用 或者 require.ensure 可以生成chunk;如:import函数即我们在写vue-router.../view/about.vue')3、webpack配置splitChunks手动拆分生成chunk,最后独立输出到js文件splitChunks 配置简单配置,把react相关包都单独提到一个文件{...原因是不论css、vue、react的loader都帮我们自动加了这句。css有style-loader,react有react-hot-loader,vue有vue-loader。

74920

React多页面应用4(webpack4 提取第三方包及公共组件)

1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04 2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等...)---2018.04.08 3、React多页面应用3(webpack4 多页面实现)---2018.04.09 4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018.04.10...5、React多页面应用5(webpack4 多页面自动化生成多入口文件)---2018.04.11 6、React多页面应用6(webpack4 开发环境打包性能小提升)---2018.04.12...7、React多页面应用7(webpack4 生产环境配置)---2018.04.13 8、React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)---2018.04.16...webpack4splitChunks

1.8K50

webpack3 升级到 webpack4 小记

来提升一下编译打包的速度 注:代码大部分参照网络,可以在后面看到链接 调研 webpack3 升级到 webpack4 的话,还是做了很大的改动,我查询资料总结如下(当然不止以下改动): ?...解决方法: 在 webpack4 中不再支持 CommonsChunkPlugin,而是使用 splitChunks 替代,那么这两者有什么区别?...by instanceof Entrypointinstead 解决方法: 这个是因为 webpack 4 不再 支持 extract-css-chunks-webpack-plugin,我们可以使用...mini-css-extract-plugin 替代 -const ExtractCssChunks = require('extract-css-chunks-webpack-plugin')...解决方法: webpack 4 已经废除了 之前 UglifyJsPlugin,用 optimization.minimize 替代 修改前: plugins: [ new webpack.optimize.UglifyJsPlugin

95920

webpack配置完全指南

动态配置入口文件 动态打包所有子项目 当构建项目包含多个子项目时,每次增加一个子系统都需要将入口文件写入 webpack 配置文件中,其实我们让webpack 动态获取入口文件,例如: // 使用 glob...concatenateModules: true, // SplitChunksPlugin 配置项 splitChunks: { // 默认 webpack4 只会对按需加载的代码做分割...抽离 css optimize-css-assets-webpack-plugin:压缩 css add-asset-html-webpack-plugin:将 JavaScript 或 CSS 资产添加到...html-webpack-plugin 生成的 HTML 中 更多插件可见:plugins 八、配置devtool:source map 配置 webpack 如何生成 Source Map,用来增强调试过程...指定一个环境: module.exports = { // 编译为类浏览器环境里可用(默认) target: 'web' }; 4. cache 缓存生成webpack 模块和块以提高构建速度

2.9K20
领券