前阵子发布过 pm.js ，原帖在这里：

发布 pm.js ，包括但不限于帮助构建 web 原生单页面

非专业前端，用词未必准确，脸皮防御值高，欢迎来喷。。。

最近随便 fork 了个 admin 的模板项目，用 pm.js 改造了下，去掉了多个页面大量的重复内容、避免不必要的重复加载、重复下载之类的，对比 fork 原作，切换内容顺滑、性能要好太多，不谦虚地说，就是性能基本能达到极致了

我对前端不算熟悉，所以暂时主要研究研究框架相关

有兴趣的朋友欢迎多来指点、给些批评建议（性能提升跟 fork 原作对比就可以了）：

https://github.com/3rdrepo/adminkit

有一个问题就是设置成 display none 的页面也是会加载的，那首屏的加载时间随着项目膨胀也会变长很多，这个怎么解决的呀

有个 lazy 选项，lazy: true 的子页面是等到需要展示的时候才进行异步加载的，比如：
https://github.com/3rdrepo/adminkit/blob/dev/static/js/init.js/> src: "pages-profile.src", // 这个 id 的元素 onclick 时会切换内容到 dst
dst: "pages-profile.html",
url: "page/pages-profile.html",
lazy: true, //如果 url 不为空，lazy 为 true 则等到首次显示 dst 内容时加载 url 对应的子页面
init: function() {...}, //首次显示时调用
onshow: function(){...}, //被显示时调用
onhide: function(){...}, //被隐藏时调用
}

还提供了$pm.release(page)，可以用于释放单个 page 的内容，如果应用层子页面内容太多想减少总资源占用压力，可以根据自己的需要、在 onhide(page) 中选择是否对该子页面内容释放，就是对该 dom 元素的 innerHTML 设置为""。

抱歉才看懂问题，前面的回答默认以为大家知道实际的机制了呢。。。
实际上单个大页面分为主页面和子页面，主页面里大概是这样子的：

每个子 div 的 id 对应一个子页面，然后才是上面 lazy 相关的回答，如果 lazy 默认是不加载的、而等用户首次点击触发 $pm.select(...) 或者代码 $pm.select(...) 时才去加载的，并不是进到主页默认就把所有加载进来

not lazy 的是进来就加载的，都可配，业务层自由管理

原作问题真的是太大了……基本怎么优化都能好很多
一个 1.6M 的 app.js （优化：split chunks ）被所有页面使用（优化：分 entrypoint 按需加载），还没有缓存（优化：immutable + 缓存），还没有 CDN （优化：静态资源单独走 CDN ），这能不慢吗