微信小程序-利用we-script 外置插件类js文件,减轻项目体积

322 阅读1分钟

一、利用we-script,通过支持加载远程js减少项目本地相关插件js文件方案。

具体实现,例: 将项目本地echarts 外置,通过we-scrip CDN加载形式(大小670KB),2、其他大体积内部插件文件类似外置
			
参考文档:
	https://github.com/bplok20010/we-script
	https://juejin.cn/post/6878214373295767565?searchId=20231201112312CB727121136BE350E4B2
	https://juejin.cn/post/7068899096232198157?searchId=20231201105734C768AEE247DB0C4DE361

基础使用方法:
	1npm install --save we-script

	2npm构建
	     step1 安装完成后,点击开发者工具中的菜单栏:工具 --> 构建 npm

	     step2 安装完成后,点击开发者工具中的菜单栏:工具 --> 项目详情 --> 本地设置 --> [勾选] 使用 npm 模块	
	
	相当使用CDN远程加载方式
	<!-- 远程引入echarts -->
	<we-script
		src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.0.2/echarts.min.js"
		bind:onLoad="echartsLoad"
	/>


远程加载CDN js文件解析,demo调试成功:

	a、远程插件文件,该文件中为一个数组排序方法,https://www.unpkg.com/we-script-demo-js@1.0.0/shuffle.js


产生相关影响:
	
	a、构建之后的依赖包大小产生了300kb
	b、加载是否流畅,是否只在初始化只加载一次避免重复请求加载以及流量消耗问题 


2、微信小程序本地存放相关静态文件移交至中转服务器CDN加载使用
	
	例:
	a、静态数据文件,ngtosData.js文件(大小422KBbMapFile地图json文件(大小578kb3、超出限制大小问题
	
	a、单个分包超出2M限制的问题,当前分包数量为4,可以使用异步加载分包方案解决,后续新增模块业务扩展根据规则创建新的分包。

	a、整体项目体积超出20M限制的问题,结合wx-script、异步分包进行优化。