前言我们知道，在webpack中，入口的入口文件中被多次引用的文件可以通过CommonsChunkPlugin提取打包成一个普通文件，减少代码重复入口：{main:'./src/main.js',user:'./src/user.js'},......新的webpack.optimize。CommonsChunkPlugin({name:"commons",filename:'common.js',minChunks:2,})//打包生成一个common.js文件，包含在main.js和user.js中引用两次及以上的模块代码然后问题来了，在使用类似vue-router的代码拆分+懒加载功能时，在每条路由对应的.vue文件中，多次引用的公共模块，如何提取公共代码拆分模块呢？代码？问题实际场景举个栗子//懒加载路由文件routes.jsconstIndex=()=>import(/*webpackChunkName:"index"*/"page/index/Index.vue"),User=()=>import(/*webpackChunkName:"userIndex"*/"page/user/Index.vue"),UserDetail=()=>import(/*webpackChunkName:"userDetail"*/"page/user/Detail.vue"),...//page/index/Index.vue主页路由文件Homepage//page/index/Index.vue用户页面路由文件用户页面上面使用了vue-router懒加载封装的首页路由文件index.js和用户页面文件userIndex.js都会包含一份public.js代码，那么问题来了，如何在代码拆分代码中自动提取public代码呢？就像CommonsChunkPlugin的作用一样，CommonsChunkPlugin在代码拆分的场景下如何使用呢？解决方案如题中所示，有两个路由文件使用了webpack代码拆分和懒加载，并且路由文件都使用了公共的public.js模块。//page/index/Index.vue主页路由文件homepage//用户页面//page/index/Index.vue用户页面路由文件userpage提取public.js公共模块，有三种解决方法解决方法一，CommonsChunkPlugin命名modules手动将所有通用模块提取到一个文件中。在webpack.config.js的CommonsChunkPlugin插件中创建文件commons.js//commons.jsimportpubfrom'public'指定commons的入口//webpack.config.jsentry:{main:'src/main.js',commons:'src/commons.js'},...newwebpack.optimize.CommonsChunkPlugin({name:"commons",//对应入口的commons,filename:'common.bundle.js',//提取common文件minChunks:Infinity,})这样如果路由文件或者其他模块使用了commons.js中的模块，代码不会重复加载，而是在common.bundle.js中获取.方案二，CommonsChunkPlugin设置children属性。官方文档CommonsChunkPlugin中的children属性解释MovecommonmodulesintotheparentchunkWithCodeSplitting,entrychunk的多个子chunk可以有共同的依赖。为了防止重复，这些都可以移到红色父级中。大小，但对初始加载时间有负面影响。如果预计用户将需要下载许多兄弟块，即入口块的子块，那么这应该会改善整体加载时间。可以看出，设置children为true可以将分码模块的依赖模块提取到父模块中。这样做的结果是确实提取了公共模块，从而减少了代码重复和代码大小。但同时，提取到父模块也意味着如果有懒加载的路由ShopList.vue没有使用public.js模块，但实际上引入了父模块，它也为此引入了public.jsShopList.vue代码。这需要CommonsChunkPlugin的异步属性。选项3（最佳实践），子级和异步齐头并进Extraasynccommonschunk与上面的类似，但不是将公共模块移动到父级（这会增加初始加载时间），而是使用新的异步加载的附加公共块。当下载附加块时，它会自动并行下载。如果设置了async，则会将上述懒加载路由文件的公共模块代码抽取出来，打包成一个单独的文件，按需加载该文件。如果一个路由没有使用到这些公共模块，则不会加载它们。例如：首页路由模块（访问路径/index），引用公共模块用户路由模块（访问路径/user），引用公共模块购物车模块（访问路径/shop），不引用公共模块,然后打包生成文件大概是main.js——根入口文件index.js——首页路由文件user.js——用户路由文件shop.js——购物车路由文件0.js——提取出来的公共模块文件路由访问url/index，加载依赖文件main.js+index.js+0.js访问url/user，加载依赖文件main.js+user.js+0.js访问url/shop，加载的依赖文件是main.js+shop.js基本解决了懒加载+代码拆分情况下公共模块的分离。下面附上一个简单的webpack.config.js配置代码入口：{main:'./src/main.js'},...plugins:[...newwebpack.optimize.CommonsChunkPlugin({name:"main",minChunks:2,children:true,//deepChildren:true,async:true,})]CommonsChunkPlugin已在webpackv4连奏中删除。最新版本如何处理chunk，查看SplitChunksPlugin.PS:webpack4hasdeprecatedCommonsChunkPlugin，解决方案只能在webpack3以下使用。参考commons-chunk-pluginCommonChunkPlugin:Feature-Selectstaticallyimportedmodulesfromchunks从动态导入创建的(require.ensure/System.import/import(".."))
