资讯专栏INFORMATION COLUMN

基于 webpack 的 SPA 单页 Web 应用 动态加载插件的机制

姘存按 / 2543人阅读

摘要:我们拿它做什么用实现可插拔的插件机制。因此我们的实现方式是将模块功能以模块的方式用打包出来。模块单文件用加载到浏览器后。接着会在对象上附加一个自身的对象。

我们拿它做什么用

实现可插拔的插件机制。

我们如何做到

由于在webpack的传统模式下是将所有模块都打包到同一文件或者同一系列文件,也就是说它所有模块必须做关联打包,进而无法实现可插拔的注入,也就无法实现插件的开启和关闭。

因此我们的实现方式是:

1.将模块功能以umd模块的方式用webpack打包出来。

umd模块单文件用script加载到浏览器后。

接着会在window对象上附加一个自身的对象。

这样就可以在任意地方获取到这个对象,然后进行模块或功能注入。

Notadd相关代码参考:
https://github.com/notadd/adm...

项目主页:欢迎star

https://github.com/notadd/notadd

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/22974.html

相关文章

  • webpack单页应用多路由多骨架屏插件

    摘要:前言在单页应用中可能会有一些特殊情况,需要不同的路由下显示不同的首骨屏。一般这种需求可以后端动态生成包含首骨屏代码实现,但如果想要纯前端实现的话目前并未发现比较好的库或插件。例如首骨屏模板 前言 在单页应用中可能会有一些特殊情况,需要不同的路由下显示不同的首骨屏。比如新闻列页和新闻详情页。一般这种需求可以后端动态生成包含首骨屏代码HTML实现,但如果想要纯前端实现的话目前并未发现比较好...

    pingan8787 评论0 收藏0
  • Vue SPA(单页应用)首屏优化实践

    摘要:原文首发代码压缩如果你用的是服务器,请修改配置文件其他类似在里加入开启或者关闭模块,这里使用表示启动设置允许压缩的页面最小字节数默认值是,不管页面多大都压缩设置系统获取几个单位的缓存用于存储的压缩结果数据流代表以为单位,按照原始数据大 原文首发: https://shuirong.github.io/ 1.代码压缩(gzip) 如果你用的是nginx服务器,请修改配置文件(其他web ...

    wall2flower 评论0 收藏0
  • 指尖前端重构(React)技术调研分析

    摘要:一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多,在等最大的技术社区搜索两者,的搜索结果是的十倍左右,另外据近期统计使用的站点是的几百倍以上。其中是基于技术,依然是浏览器应用。 一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早,但其在原理上并没有React创新的性能优化...

    AlphaWallet 评论0 收藏0
  • Webpack 4 和单页应用入门

    摘要:但由于和技术过于和复杂,并没能得到广泛的推广。但是在浏览器内并不适用。依托模块化编程,的实现方式更为简单清晰,一个网页不再是传统的类似文档的页面,而是一个完整的应用程序。到了这里,我们的主角登场了年此处应有掌声。和差不多同期登场的还有。 Github:https://github.com/fenivana/w...webpack 更新到了 4.0,官网还没有更新文档。因此把教程更新一下...

    Zoom 评论0 收藏0
  • 用vue从零开发和部署一款移动端pwa单页应用

    摘要:另外,单页应用因为数据前置到了前端,不利于搜索引擎的抓取。所以我们需要对自己的单页应用进行一些优化。 前言 最近秋招之余空出时间来按自己的兴趣动手做了一个项目,一个基于vue-cli3.0, vue,typescript的移动端pwa,现在趁热打铁,将这个项目从开发到部署整个过程记录下来,并将从这个项目中学习到的东西分享出来,如果大家有什么意见或补充也可以在评论区提出。先介绍一下这个项...

    Channe 评论0 收藏0

发表评论

0条评论

姘存按

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<