开发多页面应用时,我们有可能会在几个页面中引用相同的模块,相同的模块被多次下载会造成资源浪费,如果把这些相同的模块抽取出来,只下载一次,然后缓存起来,这样就可以避免重复下载。
假如有a.js和b.js两个模块,然后index.js和mian.js这两个文件都要引用,这是就需要把a.js和b.js抽取出来为一个公共的js,然后再index.js和main.js中引入
1、index.js
import a from './a.js';
import b from './b.js';
import $ from 'jquery';
console.log(a.a());
console.log(b.b());
console.log('-----------index.js')
console.log($)
main.js
import a from './a.js';
import b from './b.js';
import $ from 'jquery';
console.log(a.a());
console.log(b.b());
console.log('--------main.js')
console.log($)
2、webpack.config.js
let path = require('path');
// 打包多页应用
module.exports = {
mode: 'production',
optimization: { // 优化项
splitChunks: { //分割代码块
cacheGroups: { // 缓存
commons: { // 公共的代码
name: "commons", // 抽离出来的模块名
chunks: 'initial', // 初始化,从入口文件开始抽离
minSize: 0, // 如果这个代码大于0字节
minChunks: 2, // 这个代码引用多少次才需要抽离
},
vendors: { // 抽取第三方模块
priority: 1, // 权重,权重越高越先抽取
name: 'vendors',
test: /node_modules/, // 如果你多次引用了node_modules第三方模块,就抽取出来
chunks: 'initial',
minSize: 0,
minChunks: 2
}
}
}
},
entry: {
index: './src/index.js',
main: './src/main.js'
}, // 入口
output: { // 出口
filename: '[name].js', // 打包后的文件名 [name]为index或者main
path: path.resolve(__dirname, 'dist'),
}
}