splitchunks node_modules和src下的混到了一起 split和rsplit区别,字符串的内置方法strip字符串中strip是用来去除字符串两边的任意符号,只要strip()双引号中间写什么,就可以去除什么符号。同时还有lsprit,rsprit。lsprit是用来删除左边的东西rsprit反之。striprstrip&
cacheGroups是splitChunks的核心配置,splitChunks里的配置相当于是cacheGroups里每一项的默认值,而splitChunks会根据cacheGroups的配置去拆分模块。 cacheGroups里可以定义每种类型包的抽离规则,比如默认的 vendor 包,test值为node_modules,意为只匹配 node_modules 的内容,即只打包第三方库,所以 vendor 包就是抽离的第三方库。
例如:module.exports= {//...optimization: {splitChunks: {cacheGroups: {vendors: {test:/[\\/]node_modules[\\/]/,minChunks:1,minSize:0 } }, }, }, }; 示例通过 cacheGroups 属性设置 vendors 缓存组,所有命中 vendors.test 规则的模块都会被归类 vendors 分组,优先应用该组下的 minChunks、minSize ...
cacheGroups: { vendors: { // vendors用于提取所有node_modules中符合条件的模块 test: /[\\/]node_modules[\\/]/, priority: -10 // 当一个模块同时符合多个cacheGroups时,则根据其中的priority配置项确定优先级 }, default: { // 作用于被多次引用的模块 minChunks: 2, priority: -20, reuseExistingChun...
今天主要讲解一下webpack的拆包逻辑,现在的webpack实际上有一套默认的拆包逻辑,这个默认配置对绝大多数用户来说非常友好。 webpack将根据以下条件自动拆分 chunks: 新的chunk 可以被共享,或者模块来自于node_modules文件夹 新的chunk 体积大于 20kb(在进行 min+gz 之前的体积) ...
我搭建的是一个单页应用想用webpack4下的splitChunks功能想将node_modules引用的模块比如vue之类的提取放到一个js文件下但是怎么提都提不出来一点反应都没有,这是怎么回事? optimization:{ splitChunks:{ chunks:'initial',//默认只作用于异步模块,为`all`时对所有模块生效,`initial`对同步模块有效 minSize:30000,/...
通过配置test: /[\\/]node_modules[\\/]/可以将node_modules中的模块提取到单独的文件中。 2.提取公共模块(Common): 将应用中多个模块之间共享的代码提取到一个独立的文件中。 可以通过配置cacheGroups中的default缓存组来实现。 3.按需加载(Async):
splitChunks: {chunks:'async',minSize:30000,maxSize:0,minChunks:1,maxAsyncRequests:5,maxInitialRequests:3,automaticNameDelimiter:'~',automaticNameMaxLength:30,name:true,cacheGroups: {vendors: {test:/[\\/]node_modules[\\/]/,priority: -10},default: {minChunks:2,priority: -20,reuseExistingChunk...
test: /[\\/]node_modules[\\/]/, priority: -10, chunks: 'initial' }, 复制代码 打包后,会发现chunk-vendors.js文件已经变成了app-chunk-vendors.js文件,里面内容不变。 三、SplitChunks实战操作之入口文件 先去掉cacheGroups里面的方案,再打包一下。
优化将优先考虑具有更高 priority(优先级)的缓存组。默认组的优先级为负,以允许自定义组获得更高的优先级(自定义组的默认值为 0) 因为上面的chunk-lodash 的priority值为-5 大于另外两个的 -10和-20 所以优先执行改配置,所以 会从node_modules 里面分离出lodash....