[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 按照需要設置即可 ~~~