针对于移动端项目js资源过大会影响到用户体验,解决该问题常用有以下几种办法: 使用webpack插件进行代码压缩 利用webpack代码切割功能,将业务代码与框架代码进行剥离,实现异步加载,提高首屏加载速度 引用第三方的包采用cdn链接形式,避免打包到一个bundle里 现存在问题切割后的某一个js文件若是过大(超过了4M,gzipped后仍有2M多),即使异步加载也会出现等待很久的情况,所以考虑要把这些资源文件放入到cdn里,方案如下: 自动化构建流程不变,打包后仍然把目录文件拷贝到nginx服务下,目的是利用nginx服务访问入口文件,一方面是避免缓存,一方面可以快速回滚 打包过程中上传打包后的js,css文件放入阿里云OSS上存储,同时修改构建配置,将入口文件对资源的引用改到cdn上 风险性评估及问题应对措施 优点:由于构建后的资源文件带有指纹,上传cdn后不会对之前的文件进行删除,同名文件会覆盖(使用chunk哈希当文件内容发生改变时指纹才会发生变化,所以同名意味着文件内容并未发生变化),这样带来的好处是保留了历史的资源版本,即使用户入口文件被缓存到,去拿这些资源也不会出现404的情况 缺点:1>担心CDN稳定性,2>刷新节点的时间是否存在延时问题,入口文件在nginx服务下是实时响应到用户那里,若是在版本迭代时入口文件已改变而资源尚未同步会出现资源加载不到情况 紧急状况应对措施:总的来说风险性不大,若出现问题,可以第一时间修改配置回滚
PS:关于cdn访问不到资源的情况若出现,可以增加策略访问nginx下的资源文件