优化 vue.config 打包配置

package.json

@@ -5,13 +5,13 @@
 		"serve": "vue-cli-service serve",
 		"build": "vue-cli-service build",
 		"report": "vue-cli-service build --report",
-		"lint": "vue-cli-service lint"
+		"lint": "vue-cli-service lint",
+		"inspect": "vue inspect --mode=production > output.js"
 	},
 	"dependencies": {
 		"axios": "^0.21.1",
-		"cl-admin": "^1.3.1",
+		"cl-admin": "^1.3.2",
 		"cl-admin-crud": "^1.4.4",
-		"cl-admin-export": "^1.0.5",
 		"cl-admin-theme": "^0.0.3",
 		"clipboard": "^2.0.7",
 		"codemirror": "^5.59.4",

src/cool/index.js

@@ -1,5 +1,4 @@
 import Crud from "cl-admin-crud";
-import Export from "cl-admin-export";
 import Theme from "cl-admin-theme";
 
 export default {
@@ -30,10 +29,6 @@ export default {
 				}
 			}
 		},
-		{
-			name: "export",
-			value: Export
-		},
 		"copy",
 		"distpicker",
 		"demo",

src/element.js

@@ -50,28 +50,28 @@ import {
 	Badge,
 	Card,
 	Rate,
-	Steps,
-	Step,
+	// Steps,
+	// Step,
 	Carousel,
 	CarouselItem,
 	Collapse,
 	CollapseItem,
 	Cascader,
-	ColorPicker,
-	Transfer,
-	Container,
-	Header,
-	Aside,
-	Main,
-	Footer,
-	Timeline,
-	TimelineItem,
+	// ColorPicker,
+	// Transfer,
+	// Container,
+	// Header,
+	// Aside,
+	// Main,
+	// Footer,
+	// Timeline,
+	// TimelineItem,
 	Link,
 	Divider,
 	Image,
 	Calendar,
-	Backtop,
-	PageHeader,
+	// Backtop,
+	// PageHeader,
 	CascaderPanel,
 	Loading,
 	MessageBox,
@@ -134,8 +134,8 @@ Vue.use(Spinner);
 Vue.use(Badge);
 Vue.use(Card);
 Vue.use(Rate);
-Vue.use(Steps);
-Vue.use(Step);
+// Vue.use(Steps);
+// Vue.use(Step);
 Vue.use(Carousel);
 Vue.use(CarouselItem);
 Vue.use(Collapse);
@@ -154,7 +154,7 @@ Vue.use(Link);
 Vue.use(Divider);
 Vue.use(Image);
 Vue.use(Calendar);
-Vue.use(Backtop);
+// Vue.use(Backtop);
 // Vue.use(PageHeader);
 Vue.use(CascaderPanel);
 Vue.use(Drawer);

vue.config.js

@@ -1,5 +1,4 @@
 const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
-
 const isProduction = process.env.NODE_ENV === "production";
 
 // 代理列表
@@ -50,7 +49,13 @@ module.exports = {
 	},
 
 	chainWebpack: config => {
-		// svg
+		// 设置环境变量
+		config.plugin('define').tap(args => {
+			args[0]['process.env'].PROXY_LIST = JSON.stringify(PROXY_LIST)
+			return args
+		})
+
+		// 设置 svg
 		config.module.rule("svg").uses.clear();
 
 		config.module
@@ -64,49 +69,47 @@ module.exports = {
 				symbolId: "[name]"
 			});
 
-		// 去掉元素之间空格
-		config.module
-			.rule("vue")
-			.use("vue-loader")
-			.loader("vue-loader")
-			.tap(options => {
-				options.compilerOptions.preserveWhitespace = true;
-				return options;
-			})
-			.end();
-
-		// 移除 prefetch 插件
-		config.plugins.delete("prefetch-index");
+		// 生产模式下
+		if (isProduction) {
+			// 去掉元素之间空格
+			config.module
+				.rule("vue")
+				.use("vue-loader")
+				.loader("vue-loader")
+				.tap(options => {
+					options.compilerOptions.preserveWhitespace = true;
+					return options;
+				})
+				.end();
 
-		// 移除 preload 插件，避免加载多余的资源
-		config.plugins.delete("preload-index");
+			// 移除 prefetch 插件
+			config.plugins.delete("prefetch-index");
 
-		// 设置环境变量
-		config.plugin('define').tap(args => {
-			args[0]['process.env'].PROXY_LIST = JSON.stringify(PROXY_LIST)
-			return args
-		})
+			// 移除 preload 插件，避免加载多余的资源
+			config.plugins.delete("preload-index");
 
-		// 生产模式下
-		if (isProduction) {
-			config.performance.set("hints", false);
+			config.optimization.minimizer('terser').tap((args) => {
+				// 去掉注释
+				args[0].terserOptions.output = {
+					comments: false
+				};
+				return args
+			})
 
+			// 分割模块
 			config.optimization.splitChunks({
-				chunks: "all",
+				chunks: 'all',
+				maxInitialRequests: Infinity,
+				minSize: 300000,
+				automaticNameDelimiter: '-',
 				cacheGroups: {
-					// 公用模块抽离
-					common: {
-						chunks: "initial",
-						minSize: 0,
-						minChunks: 2
-					},
-					// 第三方库抽离
 					vendor: {
-						priority: 1,
-						test: /node_modules/,
-						chunks: "initial",
-						minSize: 0,
-						minChunks: 2
+						test: /[\\/]node_modules[\\/]/,
+						name(module) {
+							const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+							return `chunk.${packageName.replace('@', '')}`;
+						},
+						priority: 10
 					}
 				}
 			});
@@ -114,6 +117,7 @@ module.exports = {
 	},
 
 	configureWebpack: config => {
-		// config.plugins.push(new HardSourceWebpackPlugin());
+		// 构建缓存
+		config.plugins.push(new HardSourceWebpackPlugin());
 	}
 };