一、利用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
基础使用方法:
1、npm install --save we-script
2、npm构建
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文件(大小422KB)
b、MapFile地图json文件(大小578kb)
3、超出限制大小问题
a、单个分包超出2M限制的问题,当前分包数量为4,可以使用异步加载分包方案解决,后续新增模块业务扩展根据规则创建新的分包。
a、整体项目体积超出20M限制的问题,结合wx-script、异步分包进行优化。