try split chunks

vue.config.js

@@ -1,21 +1,19 @@
-'use strict'
+'use strict';
-const path = require('path')
+const path = require('path');
-const defaultSettings = require('./src/settings.js')
+const defaultSettings = require('./src/settings.js');
 
 function resolve(dir) {
-  return path.join(__dirname, dir)
+	return path.join(__dirname, dir);
 }
 
-const CompressionPlugin = require('compression-webpack-plugin')
+const CompressionPlugin = require('compression-webpack-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+const BundleAnalyzerPlugin =
+	require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-const name = process.env.VUE_APP_TITLE || '中建材智能自动化研究院有限公司' // 网页标题
+const name = process.env.VUE_APP_TITLE || '中建材智能自动化研究院有限公司'; // 网页标题
 
-const port = process.env.port || process.env.npm_config_port || 80 // 端口
+const port = process.env.port || process.env.npm_config_port || 80; // 端口
 
-// vue.config.js 配置说明
-//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
-// 这里只列一部分，具体配置参考文档
 module.exports = {
 	// 部署生产环境和开发环境下的URL。
 	// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
@@ -23,7 +21,6 @@ module.exports = {
 	publicPath: process.env.PUBLIC_PATH ? process.env.PUBLIC_PATH : '/',
 	// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
 	outputDir: 'dist',
-  // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
 	assetsDir: 'static',
 	// 是否开启eslint保存检测，有效值：ture | false | 'error'
 	lintOnSave: process.env.NODE_ENV === 'development',
@@ -35,54 +32,48 @@ module.exports = {
 		port: port,
 		open: true,
 		proxy: {
-      // detail: https://cli.vuejs.org/config/#devserver-proxy
 			['/proxy-api']: {
 				target: `http://localhost:80`,
 				// target: `http://api-dashboard.yudao.iocoder.cn`,
 				changeOrigin: true,
 				pathRewrite: {
-          ['^' + process.env.VUE_APP_BASE_API]: ''
+					['^' + process.env.VUE_APP_BASE_API]: '',
-        }
-      }
 				},
-    disableHostCheck: true
+			},
+		},
+		disableHostCheck: true,
 	},
 	css: {
 		loaderOptions: {
 			sass: {
-        sassOptions: { outputStyle: "expanded" }
+				sassOptions: { outputStyle: 'expanded' },
-      }
+			},
-    }
+		},
 	},
 	configureWebpack: {
 		name: name,
 		resolve: {
 			alias: {
-        '@': resolve('src')
+				'@': resolve('src'),
-      }
+			},
 		},
 		plugins: [
-      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
 			new CompressionPlugin({
 				cache: false, // 不启用文件缓存
 				test: /\.(js|css|html)?$/i, // 压缩文件格式
 				filename: '[path].gz[query]', // 压缩后的文件名
 				algorithm: 'gzip', // 使用gzip压缩
-        minRatio: 0.8                   // 压缩率小于1才会压缩
+				minRatio: 0.8, // 压缩率小于1才会压缩
 			}),
-      // analayzer
+			new BundleAnalyzerPlugin(),
-      new BundleAnalyzerPlugin()
 		],
 	},
 	chainWebpack(config) {
-    config.plugins.delete('preload') // TODO: need test
+		config.plugins.delete('preload'); // TODO: need test
-    config.plugins.delete('prefetch') // TODO: need test
+		config.plugins.delete('prefetch'); // TODO: need test
 
 		// set svg-sprite-loader
-    config.module
+		config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end();
-      .rule('svg')
-      .exclude.add(resolve('src/assets/icons'))
-      .end()
 		config.module
 			.rule('icons')
 			.test(/\.svg$/)
@@ -91,51 +82,70 @@ module.exports = {
 			.use('svg-sprite-loader')
 			.loader('svg-sprite-loader')
 			.options({
-        symbolId: 'icon-[name]'
+				symbolId: 'icon-[name]',
 			})
-      .end()
+			.end();
 
-    config
+		config.when(process.env.NODE_ENV !== 'development', (config) => {
-      .when(process.env.NODE_ENV !== 'development',
-        config => {
 			config
 				.plugin('ScriptExtHtmlWebpackPlugin')
 				.after('html')
-            .use('script-ext-html-webpack-plugin', [{
+				.use('script-ext-html-webpack-plugin', [
+					{
 						// `runtime` must same as runtimeChunk name. default is `runtime`
-              inline: /runtime\..*\.js$/
+						inline: /runtime\..*\.js$/,
-            }])
+					},
-            .end()
+				])
-          config
+				.end();
-            .optimization.splitChunks({
+			config.optimization.splitChunks({
 				chunks: 'all',
 				cacheGroups: {
 					libs: {
 						name: 'chunk-libs',
 						test: /[\\/]node_modules[\\/]/,
 						priority: 10,
-                  chunks: 'initial' // only package third parties that are initially dependent
+						chunks: 'initial', // only package third parties that are initially dependent
 					},
 					elementUI: {
 						name: 'chunk-elementUI', // split elementUI into a single package
 						priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
-                  test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
+						test: /[\\/]node_modules[\\/]_?element-ui(.*)/, // in order to adapt to cnpm
+						chunks: 'all',
+					},
+					xlsx: {
+						name: 'chunk-xlsx',
+						priority: 20,
+						test: /[\\/]node_modules[\\/]_?xlsx(.*)/,
+					},
+					echarts: {
+						name: 'chunk-echarts',
+						priority: 20,
+						test: /[\\/]node_modules[\\/]_?echarts(.*)/,
+					},
+					quill: {
+						name: 'chunk-quill',
+						priority: 20,
+						test: /[\\/]node_modules[\\/]_?quill(.*)/,
+					},
+					antv: {
+						name: 'chunk-antv',
+						priority: 20,
+						test: /[\\/]node_modules[\\/]@?antv(.*)/,
 					},
 					commons: {
 						name: 'chunk-commons',
 						test: resolve('src/components'), // can customize your rules
 						minChunks: 3, //  minimum common number
 						priority: 5,
-                  reuseExistingChunk: true
+						reuseExistingChunk: true,
-                }
+					},
-              }
+				},
-            })
+			});
 			config.optimization.runtimeChunk('single'),
 				{
 					from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
 					to: './', //到根目录下
-          }
+				};
-        }
+		});
-      )
+	},
-  }
+};
-}