学习webpack4 - 抽离公共代码

学习webpack4 - 基础配置
学习webpack4 - HTML处理
学习webpack4 - 样式处理
学习webpack4 - ES6语法转化
学习webpack4 - 第三方模块的使用
学习webpack4 - 抽离公共代码

...持续中

=======================================================

抽离公共代码

咱们在开发多个页面的项目的时候，有时候会在几个页面中引用某些公共的模块，这些公共模块屡次被下载会形成资源浪费，若是把这些公共模块抽离出来只需下载一次以后便缓存起来了，这样就能够避免因重复下载而浪费资源，那么怎么在webpack中抽离出公共部分呢？方法以下：

公共模块抽离

举例：

项目中分别有a.js, b.js, page1.js, page2.js这四个JS文件， page1.js 和 page2.js中同时都引用了a.js, b.js， 这时候想把a.js, b.js抽离出来合并成一个公共的js，而后在page1, page2中自动引入这个公共的js，怎么配置呢？以下：

配置webpack.config.js文件：

module.exports = {
  //...

  //优化项配置
  optimization: {
    // 分割代码块
    splitChunks: {
      cacheGroups: {
        //公用模块抽离
        common: {
          chunks: 'initial', 
          minSize: 0, //大于0个字节
          minChunks: 2 //抽离公共代码时，这个代码块最小被引用的次数
        }
      }
    }
  }
}

完成！

第三方模块抽离

页面中有时会引入第三方模块，好比import $ from 'jquery'; page1中须要引用，page2中也须要引用，这时候就能够用vendor把jquery抽离出来，方法以下：

module.exports = {
  //...

  //优化项配置
  optimization: {
    // 分割代码块
    splitChunks: {
      cacheGroups: {

        //公用模块抽离
        common: {
          chunks: 'initial',
          minSize: 0, //大于0个字节
          minChunks: 2, //在分割以前，这个代码块最小应该被引用的次数
        },
        
        //第三方库抽离
        vendor: {
          priority: 1, //权重
          test: /node_modules/,
          chunks: 'initial',
          minSize: 0, //大于0个字节
          minChunks: 2, //在分割以前，这个代码块最小应该被引用的次数
        }
      }
    }
  }
}

注意：这里须要配置权重 priority，由于抽离的时候会执行第一个common配置，入口处看到jquery也被公用了就一块儿抽离了，不会再执行wendor的配置了，因此加了权重以后会先抽离第三方模块，而后再抽离公共common的，这样就实现了第三方和公用的都被抽离了。

不加权重以前：
jquery也被抽离到了公共js里

加了权重以后：