调整拆包模块化

This commit is contained in:
zyy 2020-05-21 17:22:28 +08:00
parent 0dc5804886
commit c703e4affd
2 changed files with 28 additions and 42 deletions

View File

@ -41,6 +41,7 @@
"vue-router": "^3.1.6",
"vuedraggable": "^2.23.2",
"vuex": "^3.1.0",
"webpack-bundle-analyzer": "^3.8.0",
"xlsx": "^0.14.2",
"zrender": "^4.0.4"
},

View File

@ -6,6 +6,9 @@ const defaultSettings = require('./src/settings.js');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// http://127.0.0.1:8888/
// const CompressionPlugin = require('compression-webpack-plugin');
// const productionGzipExtensions = ['js', 'css'];
// const isProduction = process.env.NODE_ENV === 'production';
@ -106,6 +109,7 @@ module.exports = {
ignore: ['.*']
}
]));
config.plugins.push(new BundleAnalyzerPlugin());
const externalsConfig = {
// 'vue': 'Vue',
// 'vuex': 'Vuex',
@ -171,67 +175,48 @@ module.exports = {
config
.optimization.splitChunks({
chunks: 'all', // async表示抽取异步模块all表示对所有模块生效initial表示对同步模块生效
maxInitialRequests: Infinity,
minSize: 300000, // 依赖包超过300000bit将被单独打包 当模块 大于30kb
minChunks: 1, // 打包⽣生成的chunk⽂文件最少有⼏几个chunk引⽤用了了这个模块
automaticNameDelimiter:'-', // 打包分割符号
cacheGroups: {
// libs: {
// name: 'chunk-libs',
// test: /[\\/]node_modules[\\/]/,
// priority: -10,
// chunks: 'initial' // only package third parties that are initially dependent
// },
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor', // 要缓存的 分隔出来的 chunk 名称
priority: -10 // 缓存组优先级 数字越⼤大,优先级越⾼高
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `chunk.${packageName.replace('@', '')}`;
},
priority: 10, // 缓存组优先级 数字越⼤大,优先级越⾼高
reuseExistingChunk: true // 如果当前代码块包含的模块已经有了,就不在产生一个新的代码块
},
elementUI: {
name: 'elementUI',
test: /element-ui/,
// minChunks: 1,
priority: -10,
chunks: 'all'
},
xlsx: {
name: 'xlsx',
test: /xlsx/,
// minChunks: 1,
priority: -10,
chunks: 'all'
},
zrender: {
name: 'zrender',
test: /zrender/,
// minChunks: 1,
priority: -10,
chunks: 'all'
},
jmap: {
name: 'jmap',
jlmap: {
name: 'jlmap',
test: path.resolve(__dirname, './src/jmap'),
priority: -10,
priority: 8,
minChunks: 1,
reuseExistingChunk: true // 可设置是否重⽤用该chunk
reuseExistingChunk: true
},
jmapNew: {
name: 'jmapNew',
test: path.resolve(__dirname, './src/jmapNew'),
priority: -20,
priority: 9,
minChunks: 1,
reuseExistingChunk: true
},
jlmap3d: {
name: 'jlmap3d',
test: path.resolve(__dirname, './src/jlmap3d'),
priority: -10,
minChunks: 1,
reuseExistingChunk: true
},
ibp: {
name: 'ibp',
test: path.resolve(__dirname, './src/ibp'),
priority: -10,
priority: 7,
minChunks: 1,
reuseExistingChunk: true
}
// ibp: {
// name: 'ibp',
// test: path.resolve(__dirname, './src/ibp'),
// priority: -10,
// minChunks: 1,
// reuseExistingChunk: true
// }
}
});
config.optimization.runtimeChunk('single');