本人项目中splitChunks配置如下：module.exports={chainWebpack(config){config.when(process.en

前言CommonsChunkPlugin主要是用来提取第三方库和公共模块，避免首屏加载的bundle文件或者按需加载的bundle文件体积过大，从而导致加载时间过长，着实是优化的一把利器。先来说一下各种教程以及文档中CommonsChunkPlugin提及到chunk有哪几种，主要有以下三种：1.webpack当中配置的入口文件（entry）是chunk，可以理解为entrychunk2.入口文件

SplitChunksPluginSplitChunks是Webpack中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。推荐网址：https://webpack.docschina.org/plugins/split-chunks-plugin/webpack其他相关给、推荐一：webpack优化相关1：webpack优化系列一：we

1.安装npminit-y//生成默认的package.json文件npmiwebpackwebpack-cli--save-dev//安装在devDependencies依赖里面2.默认配置文件webpack.config.js./node_modules/.bin/webpack//运行此指令，没有指令配置文件，默认是webpack.config.js//没有设置npm指令，直接调用依赖里面的

我们马上想到了SplitChunks

为什么需要splitChunks？

背景MPX是滴滴出品的一款增强型小程序跨端框架，其核心是对原生小程序功能的增强。具体的使用不是本文讨论的范畴，想了解更多可以去官网了解更多。回到正题，使用MPX开发小程序有一段时间了，该框架对不同包之间的共享资源有一套自己的构建输出策略，其官网有这样一段描述说明：总结关键的两点：纯js资源：

问题描述我们项目做完，验收通过以后，就需要打包发布上线啦。于是我们执行命令：npmrunbuild打dist包，打包完以后截图如下：直接打包的chunk-vendors.js太大了chunk-vendors.js文件太大了，所以我们需要将其优化一下，拆分一下chunk-vendors.js是啥chunk-vendors.js，顾名思义chunk(块/包)-vendors(供应商)，即为：不是自己写

单独打包出来，比如node_modules内的插件//入口文件main.jsimport_from'lodash'console.log(_.join([1,2,3,4],'——'));//webpack的配置splitChunks

——摘自webpack从webpackv4开始，移除了CommonsChunkPlugin，取而代之的是optimization.splitChunks。

直接和其他文件打进vendor.js有会很大，所以需要将其再单独抽离出来，我决定在config.optimization.splitChunks配置如下：constIS_PROD=process.env.NODE_ENV

作用拆分代码到不同文件,优化性能,当更新代码的时候,只重新加载对应的文件,css同样也能配置1,在optimization中配置splitChunks,只需要配置chunks,其他不配置的话,以下为默认值

cacheDirectory（2）减少代码体积codesplitting想把不变的代码单独抽离出来，方便浏览器缓存，提升加载速度使用optimization，减少总体积optimization:{splitChunks

它可以将多个chunk中的公共代码抽离出来SplitChunk的重要属性默认配置optimization:{splitChunks:{//表示选择哪些chunks进行分割，可选值有：async，initial

老生常谈的splitChunks、Dll啥的就不多说了，简单分享些插件和配置功能优化，方便大家更省力地写代码。配置1.代理配置：很多时候我们为了跨域会给devServer配个proxy啥

提到代码分割，往往离不开webpack中的一项配置，它就是splitChunks。

提到代码分割，往往离不开webpack中的一项配置，它就是splitChunks。

很多东西容易忘记，做个简单笔记1、webpackloader加载顺序从后到前例子['style-loader','css-loader','sass-loader']先sass最后style2、常用插件对照CopyWebpackPlugin将单个文件或整个目录复制到构建目录DefinePlugin允许在编译时(compiletime)配置的全局常量MiniCssExtractPlugin（4.0以

公共代码提取,webpack4弃用CommonsChunkPlugin,内置optimization作用提取被重复引入的文件，单独生成一个或多个文件，这样避免在多入口重复打包文件配置项splitChunkschunks值为async（默认）,all（推荐），initial//入口import"./a.js"//同步加载import('./b.js')//异步加载//b.jsimportvuefro

optimization的配置即可*2.异步代码(import)：异步代码，无需做任何配置，会自动进行代码分割，放置到新的文件中*3.分离文件必须大于30kb，才可以分离成功，否则设置无效*/optimization:{splitChunks

关闭方法：vue.config.js文件中config.optimization.delete('splitChunks')//关闭代码分离，只生成一个js文件和css文件注意点：异步

部分配置如下：letoptimization={runtimeChunk:'single',splitChunks:{chunks:'all',maxInitialRequests:Infinity,minSize

optimization:{splitChunks:{chunks:'async',//对同步，异步，所有的模块有效minSize:30000,//当模块大于30kbmaxSize:0,//对模块进行二次分割时使用

optimization可以实现很多功能，最常见的功能是：threeshaking只支持ESModule模块的引入，删除没有引用的模块打包CodeSplitting拆分代码，提高执行效率和用户体验splitChunks

直接和其他文件打进vendor.js有会很大，所以需要将其再单独抽离出来，我决定在config.optimization.splitChunks配置如下：constIS_PROD=process.env.NODE_ENV

1.CDN2.DllPlugin3.splitChunks4.happypack下面详细介绍使用的流程。CDN通常使用的第三方模块很大时，但是又想提高打包速度，可以通过CDN引入第三方包来处理。

blog.csdn.net/lfcss/article/details/104099412)主要分享了webpack实现代码分片的几种方式：合理地规划入口，使用Commons-ChunkPlugin或SplitChunks

SplitChunks插件(webpack4.x以前使用CommonsChunkPlugin)允许我们将公共依赖项提取到现有的entrychun

一、前言本文介绍的内容包括：如何使用vue-cli3进行多页面配置与构建以及遇到的问题；结合splitChunks分离公共代码块，从而优化运行时加载性能；结合dllPlugin预构建公共代码块，从而优化编译时的构建速度

的配置文件`.babelrc`创建React---小案例导入React以及React-Dom创建React的App组件调用JS压缩安装配置webpack文件的压缩插件出错时显示错误地址使用代码分割---splitChunks

webpack4最大的改动就是废除了CommonsChunkPlugin引入了optimization.splitChunks如果你再webpack4中使用了weppack3的CommonsChunkPlugin

1.这句话的意思是，CommonsChunkPlugin已经移除，请用splitChunks,修改成以下：newwebpack.optimize.SplitChunksPlugin({cacheGroups

webpack的optimization配置1.minimizer2.runtimeChunk3.noEmitOnErrors4.splitChunks1.chunks2.name3.minChunks4

写了个共用的chunk，没有办法实现代码分离。搞了一个多小时，最后发现官方文档的这句话，吐血了！webpackwillautomaticallysplitchunksbasedontheseconditions:NewchunkcanbesharedORmodulesarefromthenode_modulesfolderNewchunkwouldbebiggerthan30kb(beforemi

webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置，这也应该是从V3升级到V4的代码修改过程中最为复杂的一部分，下面的代码即是optimize.splitChunks

Webpack在4.X版本废弃了CommonsChunkPlugin，需要使用optimize.splitChunks来替换。

webpack4移除CommonsChunkPlugin，取而代之的是两个新的配置项（optimization.splitChunks和optimization.runtimeChunk），下面介绍一下用法和机制

1：webpack4splitChunks和runtimeChunk用法详解为什么要用splitChunkswebpack4之前使用CommonsChunkPlugin提取公共代码，但是CommonsChunkPlugin

上回说到按照默认的splitChunks配置，入口里面的第三方依赖没有打包出来，这个是因为chunks属性的原因，下面我们就介绍chunks属性的意义和用法。

runtimeChunk转载其他介绍：https://segmentfault.com/a/1190000010317802#articleHeader10splitChunks.cacheGroups

说到这里webpack4取消了UglifyjsWebpackPlugin，使用minimize进行压缩，取消了CommonsChunkPlugin，使用splitChunks进行分包。

cacheGroups其实是splitChunks里面最核心的配置，一开始我还认为cacheGroups是可有可无的，这是完全错误的，splitChunks就是根据cacheGroups去拆分模块的，包括之前说的

包含了大量的特性更新,以及极大的性能优化(最高可达98%)Webpack4中移除了CommonsChunkPlugin,替换以一系列默认的配置以及简单的optimize.splitChunks接口同时Webpack4

webpack配置在.umirc.js或者config.js中配置，使用webpack的优化模块optimization.splitChunks实现，具体是api这里不做解释，自己去官网看看，说的很清楚

SplitChunks插件(webpack4.x以前使用CommonsChunkPlugin)允许我们将公共依赖项提取到现有的entrychun

文章目录entry-配置多入口、多页面splitChunks-智能抽取公共代码dynamic-import-按需动态加载tips-踩坑小提示避免过度优化！

vuewebpack中elementui使用cdn引入现在webpack4打包有splitChunks可以将第三方包分块，如果是webpack3用cdn可以减小vendor.js的大小；index.html

SplitChunksPlugin从webpackv4开始，CommonsChunkPlugin删除了，而改为optimization.splitChunks。

文件包含了应用自己的业务逻辑和第三方依赖，这个js文件很大，当浏览器加载的时候会需要很长时间，影响用户体验二、代码分割方式：1、入口配置：通过配置多个入口文件2、动态导入：js文件中通过使用import()3、插件：splitChunks

相比于webpack3，4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPlugin插件。在使用和配置上，更加方便和清晰。