抽取公共代码

1. 抽离自有模块

webpack.config.js

optimization: {
    splitChunks: {  // 分割代码块，针对多入口
        cacheGroups: {   // 缓存组
            common: {   // 公共模块
                minSize: 0,  // 大于多少抽离
                minChunks: 2,  // 使用多少次以上抽离抽离
                chunks: 'initial'  // 从什么地方开始,刚开始
            }
        }
    }
},

SplitChunksPlugin

分别有a.js和b.js, index.js和other.js分别引入a和b两个js

index.js

import './a'
import './b'

console.log('index.js');

other.js

import './a'
import './b'

console.log('other.js');

webpack.config.js

optimization: {
    splitChunks: {  // 分割代码块，针对多入口
        cacheGroups: {   // 缓存组
            common: {   // 公共模块
                minSize: 0,  // 大于多少抽离
                minChunks: 2,  // 使用多少次以上抽离抽离
                chunks: 'initial'  // 从什么地方开始,刚开始
            }
        }
    },
},

1. 抽离第三方模块

比如jquery

index.js 和 other.js分别引入

import $ from 'jquery'

console.log($);

webpack.config.js

optimization: {
    splitChunks: {  // 分割代码块，针对多入口
        cacheGroups: {   // 缓存组
            common: {   // 公共模块
                minSize: 0,  // 大于多少抽离
                minChunks: 2,  // 使用多少次以上抽离抽离
                chunks: 'initial'  // 从什么地方开始,刚开始
            },
            vendor: {
                priority: 1, // 增加权重,先抽离第三方
                test: /node_modules/,
                minSize: 0,  // 大于多少抽离
                minChunks: 2,  // 使用多少次以上抽离抽离
                chunks: 'initial'  // 从什么地方开始,刚开始
            }
        }
    },
},