CommonsChunkPlugin的一些总结，以及如何分别打包公共代码和第三方库

最新推荐文章于 2020-06-01 17:07:55 发布

邵天宇Soy

最新推荐文章于 2020-06-01 17:07:55 发布

阅读量9.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： javascript 工具文章标签：插件 webpack

本文链接：https://blog.youkuaiyun.com/qq_35087256/article/details/77895890

javascript 同时被 2 个专栏收录

84 篇文章

订阅专栏

工具

20 篇文章

订阅专栏

本文总结了如何使用Webpack的CommonsChunkPlugin来分别打包公共代码和第三方库。通过配置，可以实现main1和main2.js的公共部分被提取到common.bundle.js，而第三方库如j1和j2被打包到vendor.bundle.js，避免重复打包，优化资源加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何分别打包公共代码和第三方库

现在假设入口文件里面有

entry:{
    main1:'./app/js-uglify/a.js',
    main2:'./app/js-uglify/b.js',
    vendor:['./app/js-uglify/j1','./app/js-uglify/j2']
}

a.js和b.js是项目文件，j1和j2是第三方插件

出口文件配置：

 output: {
    path: BUILD_PATH,
    filename: '[name].bundle.js'
 }

增加模块插件：

new webpack.optimize.CommonsChunkPlugin({
  name: 'common',
  chunks: ['main1', 'main2'],
  filename: 'common.bundle.js',
  minChunks: 2,
}),
new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  chunks: ['common'],
  filename: 'vendor.bundle.js',
  minChunks: Infinity,
})

执行-p后，可以在build目录下，生成以下几个文件:

main1.bundle.js -> 仅包含main1.js的代码文件
mian2.bundle.js -> 仅包含main2.js的代码文件

common.bundle.js -> 包含main1.js和main2.js公共部分的代码文件（不包含第三方库代码）
vendor.bundle.js -> 仅包含第三方库

可以用来抽取第三方类库和框架，这样每一个入口文件无论是否调用它们，都不会将它们重复打包进去