调整拆包模块化

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", "vue-router": "^3.1.6",
"vuedraggable": "^2.23.2", "vuedraggable": "^2.23.2",
"vuex": "^3.1.0", "vuex": "^3.1.0",
"webpack-bundle-analyzer": "^3.8.0",
"xlsx": "^0.14.2", "xlsx": "^0.14.2",
"zrender": "^4.0.4" "zrender": "^4.0.4"
}, },

View File

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