webpack4知识整理（七） 代码抽离

• 这里对optimization中的代码抽离配置进行简单说明

• 首先看一下配置条件，有多个入口文件，入口文件分别对公共的JS文件进行调用，为了避免重复打包，还可以作为缓存文件来优化

• 在src目录下index.js和other.js文件分别对util1.js和util2.js进行引用，所以util1和util2可以被单独的抽离出来

• 

• 接下来对webpack的optimization属性进行配置

let path = require('path')
let CleanWebpackPlugin = require('clean-webpack-plugin')


module.exports ={
 mode:'development',
 entry:{
   index:'./src/index.js',
   other:'./src/other.js'
 },
 output:{
   filename:'[name].js',
   path:path.resolve(__dirname,'dist')
 },

 ... ...

 optimization:{
   splitChunks:{
     cacheGroups:{
       common:{
         chunks:'initial',
         minSize:0,
         minChunks:2
       }
     }
   }
 }
}

1. minSize是用来设置公共代码的最小字节，超过这个数值就会被抽离

2. minChunks是用来设置被引用多少次才进行抽离

• 

 

• 如果多个文件同时引用第三方依赖库，需要单独抽离出第三方依赖库需要在optimization做一下配置

optimization:{
   splitChunks:{
     cacheGroups:{
       common:{
         chunks:'initial',
         minSize:0,
         minChunks:2
       },
       vendor:{
         priority:1,
         test:/node_modules/,
         chunks: 'initial',
         minSize: 0,
         minChunks: 2
       }
     }
   }
 }

1. vendor属性配置就是对第三方依赖的单独抽离配置
2. priority用来配置处理的优先级，这里如果不配置，将会和不是第三方依赖的文件打包在一起
3. test是表示依赖的文件来自于哪里

• vendor文件就是第三方依赖的抽离文件

转载于:https://my.oschina.net/u/3996596/blog/3044976