百度移动网站检测,贵州建设公司网站,使wordpress没有手机页面,查企业信息的国家网站webpack团队人员卧薪尝胆五个多月的时间终于带来的webpack4#xff0c;个人觉得webpack4带来的最大优化便是对于懒加载块拆分的优化#xff0c;删除了CommonsChunkPlugin#xff0c;新增了优化后的SplitChunksPlugin#xff0c;那么CommonsChunkPlugin的痛点在哪#xff1… webpack团队人员卧薪尝胆五个多月的时间终于带来的webpack4个人觉得webpack4带来的最大优化便是对于懒加载块拆分的优化删除了CommonsChunkPlugin新增了优化后的SplitChunksPlugin那么CommonsChunkPlugin的痛点在哪SplitChunksPlugin的优化又是在哪
1、CommonsChunkPlugin的痛
记得17年始我刚开始用webpack搭建一个vue的单页应用框架时我陆续的抛出了几个问题
1、如何避免单页应用首次的入口文件过大
这个问题处理起来倒简单webpack支持import()语法实现模块的懒加载可以做到随用随载也就是除了首页要用到文件其他模块使用懒加载就能有效的避免入口文件过大
2、入口模块以及剩下的懒加载模块引用公用的模块时代码会重复吗webpack会处理吗怎么处理
代码重复是肯定的如果父级模块中没有引入懒加载模块的共用模块那么懒加载各模块间就会出现代码重复webpack能处理那么怎么处理呢这时CommonsChunkPlugin就信誓旦旦地登场了它能够将全部的懒加载模块引入的共用模块统一抽取出来形成一个新的common块这样就避免了懒加载模块间的代码重复了哇好强大点个赞。可惜的是又回到了第一个问题你把共用的东西都抽出来了这样又造成了入口文件过大了。以下是CommonsChunkPlugin时代常用的配置
new webpack.optimize.CommonsChunkPlugin({name: vendor,// 引入node_modules的依赖全抽出来minChunks: function (module, count) {// any required modules inside node_modules are extracted to vendorreturn (module.resource /\.js$/.test(module.resource) module.resource.indexOf(path.join(__dirname, ../node_modules)) 0)}// 或者直接minChunks: 2重复模块大于2的全部抽出来
}),
总之你在代码重复与入口文件控制方面你得做个平衡而这个平衡挺不利于多人开发的也不易于优化.
CommonsChunkPlugin的痛痛在只能统一抽取模块到父模块造成父模块过大不易于优化
2、SplitChunksPlugin的好
前面讲了那么多其实SplitChunksPlugin的登场就是为了抹平之前CommonsChunkPlugin的痛的它能够抽出懒加载模块之间的公共模块并且不会抽到父级而是会与首次用到的懒加载模块并行加载这样我们就可以放心的使用懒加载模块了以下是官网说明的一些例子
假设存在以下chunk-a~chunk-d
chunk-a: react, react-dom, some components
chunk-b: react, react-dom, some other components
chunk-c: angular, some components
chunk-d: angular, some other components
webpack会自动创建两个chunk模块结果如下
chunk-a~chunk-b: react, react-dom
chunk-c~chunk-d: angular
chunk-a to chunk-d: Only the components
SplitChunksPlugin使用官网默认配置基本可以满足大多数单页应用了
module.exports {//...optimization: {splitChunks: {chunks: async,minSize: 30000,minChunks: 1,maxAsyncRequests: 5,maxInitialRequests: 3,automaticNameDelimiter: ~,name: true,cacheGroups: {vendors: {test: /[\\/]node_modules[\\/]/,priority: -10},default: {minChunks: 2,priority: -20,reuseExistingChunk: true}}}}
};
以下是我对于多页应用补充的配置
optimization: {splitChunks: {// 抽离入口文件公共模块为commmons模块cacheGroups: {commons: {name: commons,chunks: initial,minChunks: 2}}}},
SplitChunksPlugin的好好在解决了入口文件过大的问题还能有效自动化的解决懒加载模块之间的代码重复问题 资料没有了CommonsChunkPlugin咱拿什么来分包
