优化建议

前端

一. 打包优化

	// 开发环境方便源码调试
	devtool: isDev ? 'cheap-module-source-map' : false,

	
	// 提取第三方库。splitChunks配置参考
	// 如果碰见报错:Cannot read property 'pop' of undefined,只要加上enforce: true就好了,参考echarts
	optimization: {
		...config.optimization,
		splitChunks: {
			// chunks: 'initial',
			cacheGroups: {
				// 第三方不变的包,单独打包插入HTML。当项目迭代时,不会再将第三方库打包进包里面了,可以减少包的大小,提高性能
				'ant-react': {
					chunks: 'all',
					test: /ant|react/,
					name: "ant-react",
					priority: -1,
					reuseExistingChunk: true,
				},
				echarts: {
					chunks: 'all',
					test: /echarts/,
					name: "echarts",
					priority: -1,
					reuseExistingChunk: true,
					enforce: true
				},
				// 以下是使用不到的包(比如其他npm包内部依赖的包),将其单独打包,避免打包进入bundle.js
				'monaco-editor': {
					chunks: 'all',
					test: /monaco-editor/,
					name: "monaco-editor",
					priority: -1,
					reuseExistingChunk: true,
				},
				// 以下是可能变化的包
				nodeModules: {
					// 将node_modules打包在一起
					chunks: 'all',
					test: /[\\/]node_modules[\\/]/,
					priority: -3,
					// reuseExistingChunk: true,
					name: 'nodeModules',
				},
				qikecommon: {
					// 将其他代码打包在一起
					chunks: 'all',
					priority: -4,
					enforce: true,
					// reuseExistingChunk: true,
					name: 'qikecommon'
				}
			}
		}
	}
	

	
	// webpack-bundle-analyzer配置参考。注意判断环境,debug环境才配置这个
	plugins: [
		...config.plugins,
		new BundleAnalyzerPlugin({
			analyzerMode: 'server',
			analyzerHost: '127.0.0.1',
			analyzerPort: 8889,
			reportFilename: 'report.html',
			defaultSizes: 'parsed',
			openAnalyzer: true,
			generateStatsFile: false,
			statsFilename: 'stats.json',
			statsOptions: null,
			logLevel: 'info'
		}),
	]

	// webpack的gzip压缩。注意判断环境,生产环境才配置这个
	const CompressionPlugin = require("compression-webpack-plugin");
	plugins: [
		...config.plugins,
		new CompressionPlugin({
			test: /\.(js|css|html|svg)$/i,
			// 使用不到的包,禁用压缩,节省时间
			exclude: /monaco\-editor|tinymce|exceljs/,
			algorithm: 'gzip',
			compressionOptions: { level: 9 },
			// minRatio: 0.8,
			filename: '[file].gz[query]'
		}),
	]

	
	// 删除CSS的sourcemaps。开发环境和生成环境都需要
	const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
	webpackConfig.optimization.minimizer.push(new CssMinimizerPlugin({
			sourceMap: false,
			minimizerOptions: {
				sourceMap: false
			},
			minify: async (data, inputMap, minimizerOptions) => {
				// eslint-disable-next-line global-require
				const CleanCSS = require('clean-css');
				const [
					[filename, input]
				] = Object.entries(data);
				const minifiedCss = await new CleanCSS({
					sourceMap: false
				}).minify({
					[filename]: {
						styles: input,
						sourceMap: inputMap,
					},
				});
				return {
					css: minifiedCss.styles,
					map: minifiedCss.sourceMap ? minifiedCss.sourceMap.toJSON() : '',
					warnings: minifiedCss.warnings,
				};
			},
		}));

	// 删除license文件。开发环境和生成环境都需要
	webpackConfig.optimization.minimizer.push(new TerserPlugin({
		terserOptions: {
			parse: {
				ecma: 8,
			},
			compress: {
				ecma: 5,
				warnings: false,
				comparisons: false,
				inline: 2,
			},
			mangle: {
				safari10: true,
			},
			output: {
				ecma: 5,
				comments: false,
				ascii_only: true,
			},
		},
		// 不打包LICENSE文件
		extractComments: false,
		sourceMap: false
	}))

二、页面优化

后端

运维

网络