发布说明0.1版

功能演示
请添加图片描述

门户

可以自由扩展门户页面，后期设想主要为了维护整个系统的入口，以及目录管理

来访统计【支持移动端】

主要引用于用户填写信息，并显示显示信息列表。
在这里插入图片描述

在线实时运行脚本

主要是一个可以在线运行的js+css+jquery脚本

demo

主要是模块搭建小demo。

发布多语言模块【待添加】

人脸识别【待添加】

问题

购买的服务器带宽比较小。打包后的js、css较大，加载需要30秒左右。
解决：
1.拆分js,按照模块才分。
2.压缩文件

查看打包后的文件大小

在这里插入图片描述

配置optimization分离包

分离antd的包，以及分离lodash

splitChunks: {
	chunks: 'async',
	minSize: 20000,
	minChunks: 1,
	maxAsyncRequests: 5,   // 按需加载时候最大的并行请求数
	maxInitialRequests: 3,   // 最大初始化请求数 因为这里设置了3所以下面不管我这么调整优先级都是只能拆分三个包
	automaticNameDelimiter: '~',   // 打包分割符
	name: true,
	cacheGroups: {
		common: { // 打包其余的的公共代码
			minChunks: 2, // 引入两次及以上被打包
			name: 'common', // 分离包的名字
			chunks: 'initial',
			priority: 0,//优先级
			reuseExistingChunk: true
		},
		lodash:{
			name: 'lodash', // 分离包的名字
			minSize:1024,
			priority: 80,
			chunks: 'initial',
			test: (module) => {
				return (/lodash/.test(module.context));
			},
		},
		libs: {
			name: 'libs',
			test: (module) => {
				return (/[\\/]node_modules[\\/]/.test(module.context));
			},
			minSize:1024,
			priority: 10,
			chunks: 'initial' //only package third parties that are initially dependent
		},
		antd: {
				chunks: "async",
				name: 'antd',
				chunks: 'all',
				priority: 75,
				test: (module) => {
					return (/[\\/]antd[\\/]/.test(module.context));
				},
			},
	}
}

填坑1

如何知道自己的引用发布时有多少个依赖，利用webpack-bundle-analyzer 插件查看打包大小【上图】
在plugins中添加即可

	new BundleAnalyzerPlugin()

填坑2

splitChunks.maxInitialRequests=number;//最大初始化请求数限定了拆包个数。
如上图我不管怎么设置拆分都只能拆分出来三个包【一开始我默认设置了3】，调整后可以才分指定数量的js文件【cacheGroups的数组长度】

开启tomcat压缩前后文件对比【上面为开启前后面为开启后】

<Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" 
			   compression="on" 
	    compressionMinSize="2048"   
	    noCompressionUserAgents="gozilla, traviata"                            
		compressableMimeType="text/html,text/xml,application/javascript,text/css,text/plain,text/json" 
	/>