[TOC] >[info] ## SplitChunksPlugin分割代码 -- 抽取公共模块 ~~~ 1.webpack 创建项目的时候我们想对代码进行抽离打包，在4.0之前'commonsChunkPlugin',在4.0之后'splitChunksPlugins' 'splitChunksPlugins'是webpack主模块中的一个细分模块，无需npm引入。功能上，'splitChunksPlugins'只能用于如何抽离 公用的代码，也就是抽离公用代码的规则 ~~~ >[danger] ##### 先举个例子抽离vue ~~~ 1.在打包的时候如果我们想把vue单独提取出一个js 可以向下面的写法，意思是把vue 打包成一个vendors.js 文件 2.chunks 参数说明: 2.1.async 异步引⼊的库进⾏分离(默认) 2.2.initial 同步引⼊的库进⾏分离 2.3.all 所有引⼊的库进⾏分离(推荐) ~~~ ~~~ moudles.export = { optimization: { splitChunks: { cacheGroups: { commons: { test: /(vue)/, name: 'vendors', chunks: 'all' } } } } } ~~~ ~~~ 当然配合 'HtmlWebpackPlugin'可以将打包好的js 引入 new HtmlWebpackPlugin({ inlineSource: '.css$', template: path.join(__dirname, `src/${pageName}/index.html`), filename: `${pageName}.html`, chunks: ['vendors', pageName], // vendors 打包后的js文件 inject: true, minify: { html5: true, collapseWhitespace: true, preserveLineBreaks: false, minifyCSS: true, minifyJS: true, removeComments: false } }) ~~~ >[danger] ##### 按规则抽取 ~~~ 1.上面案例抽取的是指定文件vue的，我们也可以按照规则抽取公共的 ~~~ ~~~ optimization: { splitChunks: { minSize: 0, // 分离的包体积的⼤⼩,0就是任意包 cacheGroups: { commons: { name: 'commons', chunks: 'all', minChunks: 2 // 设置最⼩引⽤次数为2次 } } } } ~~~ >[danger] ##### 关于更多的参考 ~~~ module.exports = { //... optimization: { splitChunks: { // async：异步引入的库进行分离（默认）， initial： 同步引入的库进行分离， all：所有引入的库进行分离（推荐） chunks: 'async', minSize: 30000, // 抽离的公共包最小的大小，单位字节 maxSize: 0, // 最大的大小 minChunks: 1, // 资源使用的次数(在多个页面使用到)， 大于1， 最小使用次数 maxAsyncRequests: 5, // 并发请求的数量 maxInitialRequests: 3, // 入口文件做代码分割最多能分成3个js文件 automaticNameDelimiter: '~', // 文件生成时的连接符 automaticNameMaxLength: 30, // 自动自动命名最大长度 name: true, //让cacheGroups里设置的名字有效 cacheGroups: { //当打包同步代码时,上面的参数生效 vendors: { test: /[\\/]node_modules[\\/]/, //检测引入的库是否在node_modlues目录下的 priority: -10, //值越大,优先级越高.模块先打包到优先级高的组里 filename: 'vendors.js'//把所有的库都打包到一个叫vendors.js的文件里 }, default: { minChunks: 2, // 上面有 priority: -20, // 上面有 reuseExistingChunk: true //如果一个模块已经被打包过了,那么再打包时就忽略这个上模块 } } } } }; ~~~ [使用SplitChunksPlugin分割代码](https://www.jianshu.com/p/2cc8457f1a10) [webapck4抽取公共模块“SplitChunksPlugin”](https://www.cnblogs.com/xieqian/p/10973039.html) >[danger] ##### 问答 ~~~ 1.既想提取静态资源react,又想提取公共资源还想打到不同的文件里怎么办，支持数组方式吗？ '答'：可以的，这个cacheGroup 可以配置多个组的。想打包到不同的文件只需要传到 html-webpack-plugin的 chunk 按照需要设置即可 ~~~