《聚》发布0.1版本

水深无声 2022-09-06 13:26 156阅读 0赞

### 《聚易心，汇一海》 项目发布 ###

*  发布说明0.1版
 *   *  门户
     *  来访统计【支持移动端】
     *  在线实时运行脚本
     *  demo
     *  发布多语言模块【待添加】
     *  人脸识别【待添加】
 *  问题
 *   *  查看打包后的文件大小
     *   *  配置optimization分离包
         *  填坑1
         *  填坑2
     *  开启tomcat压缩前后文件对比【上面为开启前后面为开启后】

# 发布说明0.1版 #

功能演示  
![请添加图片描述][30a33bf5b97041c0976c8b2850ed3b2f.gif]

## 门户 ##

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

## 来访统计【支持移动端】 ##

主要引用于用户填写信息，并显示显示信息列表。  
![在这里插入图片描述][10db4af393ff46de920672c9f6d53b54.png]

## 在线实时运行脚本 ##

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

## demo ##

主要是模块搭建小demo。

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

## 人脸识别【待添加】 ##

# 问题 #

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

## 查看打包后的文件大小 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70]

### 配置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压缩前后文件对比【上面为开启前后面为开启后】 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70 1]

--------------------

功能模块持续完善中，欢迎大家提供个人想法与建议。

[30a33bf5b97041c0976c8b2850ed3b2f.gif]: /images/20220829/0ad54530fe4049ff8a6256500b1c3767.png
[10db4af393ff46de920672c9f6d53b54.png]: /images/20220829/1a47df344114424e859622434d1b6069.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70]: /images/20220829/99edaadaa9774cf18d42f0e39c4aa6d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xqY2MxMjI_size_16_color_FFFFFF_t_70 1]: /images/20220829/d974665f373a4f6e98269cc464f1d69b.png