使用场景

多页应用一般会重复多次使用部分公共代码，这样每次加载单页的时候，就会重复去加载这些公共代码，会造成以下问题：

相同资源重复被加载，浪费用户流量，增加服务器成本
每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验

如果将这些公共代码抽取出来，并让浏览器缓存起来，用户在请求资源的时候，可以直接读取缓存中的这些代码，这样就能解决以上问题。

抽离公共代码

入口文件有两个：index.js ，other.js；两者都引用了 a.js 和 b.js，可以将 a 和 b 抽离出来打包成 common.js，然后让 index.js 和 other.js 直接引用 common.js 即可

Javascript

// webpack.config.js
module.exports = {
  optimization:{
    splitChunks: { // 分割代码块
      cacheGroups: { // 缓存组
        common: { // 公共的模块
          chunks: 'initial', // 刚开始就要抽离
          minSize: 0, // 大于0字节抽离
          minChunks: 2 // 重复使用2次抽离
        }
      }
    }
  },
}

这样就能够在一开始就将大于0字节的，并且使用2次以上的代码抽离出来，npm run build 得到的文件为：

powershell

dist
|
. -- index.html
|
. -- commom~index~other.js
|
. -- index.js
|
. -- other.js

index.js 和 other.js 都使用了抽离出来的公共代码 commom~~index~~other.js

抽离公共第三方库

在上面的基础上，index.js 和 other.js 都引用了 jquery 库，配置 cacheGroups 的 vendor 属性抽离第三方库

Javascript

module.exports = {
  optimization:{
    splitChunks:{ // 分割代码
      cacheGroups:{ // 缓存组
        common:{ // 公共的模块
          chunks:'initial',
          minSize:0,
          minChunks:2,
        },
        vendor:{	
          test:/node_modules/, // 把此目录下符合条件的库抽离出来
          chunks:'initial', // 刚开始就要抽离
          minSize:0, // 大小大于0字节的时候需要抽离出来
          minChunks:2, // 重复2次使用的时候需要抽离出来
        }
      }
    }
  },
}

但是这样配置，common 会优先 vendor 抽离，jquery 会被当作普通公共模块和 a.js ，b.js 一起抽离到 commom~~index~~other.js 中；后面的 vendor 属性就没用了，

为了将第三方公共模块单独抽离出来，方便其他文件使用，给 vendor 添加优先级属性 priority，设置先抽离第三方公共模块再抽离普通模块

Javascript

module.exports = {
  optimization:{
    splitChunks:{ // 分割代码
      cacheGroups:{ // 缓存组
        common:{ // 公共的模块
          chunks:'initial',
          minSize:0,
          minChunks:2,
        },
        vendor:{	
          priority: 1,  // 添加优先级
          test:/node_modules/, // 把此目录下符合条件的库抽离出来
          chunks:'initial', // 刚开始就要抽离
          minSize:0, // 大小大于0字节的时候需要抽离出来
          minChunks:2, // 重复2次使用的时候需要抽离出来
        }
      }
    }
  },
}

打包得到的文件

powershell

dist
|
. -- index.html
|
. -- commom~index~other.js
|
. -- index.js
|
. -- other.js
|
. -- vendor~index~other.js