标签：代码 抽离 webpack html 模块 chunks chunk
1、为什么要抽离公共代码
在多入口文件的情况下，如果在每个入口文件中都引入了相同的模块，那么打包时，就会将这个模块重复打包进去，这是没有必要的。
2、为什么要抽离第三方代码
每次更改了自己的代码，重新打包，生成了新的hash文件名，而第三方包（如lodash）并没有改变，不需要重新打包。
3、配置optimization下的splitChunks项
开发环境下没有必要抽离
webpack.common.js和webpack.dev.js没有改动
webpack.prod.js改动
optimization和plugins平级
1、chunks共有三个选项值
一般情况下用all
chunk理解为是一段代码（代码块）
- initial 入口 chunk，对于异步导入的文件不处理
- async 异步 chunk，只对异步导入的文件处理
- all 全部 chunk，同步、异步都处理
optimization: {
// 分割代码块
splitChunks: {
chunks: 'all',
// 缓存分组
cacheGroups: {
// 第三方模块
vendor: {
name: 'vendor', // chunk 名称
priority: 1, // 权限更高，优先抽离，重要！！！
test: /node_modules/,
minSize: 0, // 大小限制，最小多大，就抽离出来，为了防止一些比较小的模块被单独抽离出来，反而浪费资源
minChunks: 1 // 最少复用过几次，就抽离出来
},
// 公共的模块
common: {
name: 'common', // chunk 名称
priority: 0, // 优先级
minSize: 0, // 公共模块的大小限制
minChunks: 2 // 公共模块最少复用过几次
}
}
}
}
4、配置HtmlWebpackPlugin插件
chunks项，是一个数组，表示这个入口下要引用哪些chunk，chunk的名字就是上面抽离时定义的name
plugins: [
// 多入口 - 生成 index.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'index.html'),
filename: 'index.html',
// chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
chunks: ['index', 'vendor', 'common'] // 要考虑代码分割
}),
// 多入口 - 生成 other.html
new HtmlWebpackPlugin({
template: path.join(srcPath, 'other.html'),
filename: 'other.html',
chunks: ['other', 'common'] // 考虑代码分割
})
]
标签：代码,抽离,webpack,html,模块,chunks,chunk 来源： https://blog.csdn.net/longtengg1/article/details/118768556
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。