webpack提取公共js代码
webpack打包js代码与提取公共js代码分析
webpack提取公共js代码⽰例
⼀、分析
webpack默认打包js代码时，是将从⼊⼝js模块开始，将⼊⼝js模块所依赖的js以及模块逐层依赖的模块，全部以⼊⼝js模块为主体全部打包⾄⽣成的对应js⽂件中。即使是多个js⼊⼝依赖链模块依赖了同⼀个模块也会被重复打包⾄不同的js⽂件中，这种打包⽅式会产⽣⽐较⼤的代码冗余。
通过上图可以看到，A模块会重复出现在bundle1、bundle2、bundle3中;B模块虽然只被M3依赖，但是由于M3同时被三个⼊⼝模块依赖，所以B模块也会同时出现在最后⽣成的三个js⽂件中，到了M这⼀层，M3的代码肯定会重复出现最后的三个js⽂件中，这个依赖模型图就可以看出因为相互依赖，导致的打包时代码冗余会很⼤。所以，提取公共js代码是性能优化的重要⽅式。
关于提取公共js代码并⾮是被依赖了多次就⼀定会被提取为公共代码，暂且不讨论这个并⾮是什么，先思考⼀个问题“如果⼀个模块⾮常⼩，但被多个模块依赖，是否就值得提取为公共代码模块呢？”
显然，如果是⼀个⾮常⼩的模块被提取为公共代码是⾮常不合适的，相对计算机内存等硬件性能⽽⾔，⽹络请求对系统性能的影响更⼤，因为⽹络传输存在太多不能确定的因素，所以提取公共js代码也会有⼀些（参数）约束，以求在相对的系统性能下达到系统性能的最佳状态。
关于webpack4的系统优化详细⽂档⼿册可以查看这⾥：
常⽤参数：
minSize(默认是30000)：形成⼀个新代码块最⼩体积；
minChunks(默认是1)：在分割之前，这个代码最⼩应该被引⽤的次数（注：保证代码块复⽤性，默认配置的策略是不需要引⽤也可以被分割）；
maxInitialRequests(默认是3)：⼀个⼊⼝最⼤的并⾏请求数；
maxAsyncRequests(默认是5)：按需加载时候最⼤的并⾏请求数；
chunks(默认是async)：表⽰显⽰块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all；
test：⽤于控制哪些模块被这个缓存组匹配到。原封不动传递出去的话，它默认会选择所有的模块。可以传递的值类型：RegExp、String和Function；
name(打包的chunks的名字)：字符串或者函数（函数可以根据条件⾃定义名字）；
priority：缓存组打包的先后优先级。
⼆、⽰例
⽰例⼯作区间的⽂件结构：
//⼯作区间
src//⽂件夹
module.js//⾃定义公共模块
subPageA.js//业务逻辑代码A
subPageB.js//业务逻辑代码B
pageA.js//业务A的⼊⼝js
pageB.js//业务B的⼊⼝js
node_modules//打包环境公共包⽂件
lodash//lodash库的包
package.json//配置环境信息
各个⽂件的代码（⽰例中只给出依赖关系）：
module.js: export default 'module'; ；
PageA.js: import './subPageA'; var lodash = require('lodash'); ；
PageB.js: import './subPageB'; var lodash = require('lodash'); ；
subPageA.js: import './module'; export default 'subPageA'; ；
subPageB.js: import './module'; export default 'subPageB'; ；
打包配置⽂件fig.js:
var path = require('path');
entry:{
pageA:'./src/pageA.js',
pageB:'./src/pageB.js'
},
output:{
solve(__dirname,'dist'),//构建⽂件夹
filename:'[name][hash:5].bundle.js',//⽣成⽂件名称
chunkFilename:'[name][hash:5].js'
},
optimization:{//webpack4新增
splitChunks:{//可以在这⾥直接设置抽离代码的参数，最后将符合条件的代码打包⾄⼀个公共⽂件
cacheGroups:{//设置缓存组⽤来抽取满⾜不同规则的chunk，下⾯以⽣成common、vender为例
/
/ 根据不同的参数设置抽取不同条件的公共js
common:{//
name:'common',
chunks:'all',
minSize:1,
minChunks:1,
priority:1//设置匹配优先级，数字越⼩，优先级越低
},
vendor:{
name:'vender',
test:/[\\/]node_modules[\\/]/,//匹配node模块中匹配的的模块
javascript的特性
priority:10,//设置匹配优先级，数字越⼤，优先级越⾼
chunks:'all'
}
}
}
},
mode:'development'
}
在⽰例中，以test作为提取条件，在priority:10⼤于priority:1的条件下优先提取了lodash并命名为vender作为⼀个公共js，然后再提取module.js，即使是lodash还符合common的提取条件，但由于已经有优先级⾼的提取了这部分代码，就不会再重复提取。
关于webpack提取js代码优化操作还有其他特性和参数没有在⽰例中展⽰，需要进⼀步学习和了解web
pack的打包操作建议参考前⽂中提供的⼿册链接。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。