admin管理员组文章数量:1642495
缘起
一直在纠结要不要发这个文章,因为现在这个方案除了少数需要线上IDE的公司能用到,大部分公司其实不值得花费大量人力物力去搞这个,因为我一直认为技术是更好的为公司业务做服务的,发的文章最好是大家能用的上的!
为啥我最后还是决定发这个文章呢,因为小编每次写文章前都会进行摇号,最终摇上了这个文章,所以按照规则发一发吧!
题目解析
我们知道webpack其实很大程度上利用了node的能力,那么这个标题其实可以转化为如何让浏览器拥有node的能力。去年的时候,因为公司业务的关系,我做过类似测试,发现node的模块在浏览器上是阉割过的!这个其实分两步看,第一步我们可以用浏览器的一部分能力替代node部分模块,第二步是我们可以找对应的库替代node的其他模块,从而在浏览器上实现node的能力!
webpack如何跑起来的
这个问题其实就是webpack的运行原理,这里不详细介绍,大致说下原理:通过入口文件,和一些列配置的规则,把源文件通过编译后转化成对应的js等文件,进行输出!
webpack在node环境和浏览器环境
这块我在听了一群大佬的分享之后,明白了自己与大佬之间的差距,同时也知道了应该如何在浏览器环境处理这个问题!
其实主要是以下几点比较重要:
- 内置模块加载,比如path,resolve,http,vm等
- 文件系统,打包处理各个源文件
- 按需加载,处理node_modules等按需加载的文件
- 优化
内置模块加载
这个是可以通过三方的库来处理,大家可以自己去搜下,例如node的path模块,浏览器可以用path-browerify进行polyfill。
文件系统
说白了就是浏览器cpu,内存资源有限,必须进行告诉读写。我们就可以利用上面的浏览器的一些能力和模拟的node的某些模块,获取文件的相应信息,童鞋们可以理解为此时的浏览器已经拥有了大部分node的能力,可以读写文件,这里推荐下Memfs,webpack-dev-server就是用它作为核心,因为它在读写文件的时候是buffer处理,我们需要做的是写个方法,让它能高速处理文件即可!具体方法如何写,大家可以参考下node的fs模块,就是通过路径找到对应的文件,没有文件就创造文件,然后把内容直接赋值即可,在文件的stat上加上时间戳等属性即可!
按需加载
这里不过多介绍,大家可以引用node中的模块,lib目录下的cjs下的loader.js,进行处理,看看node还是蛮人性化的!
优化
浏览器运行webpack的时候,因为浏览器是单线程会卡顿,所以我们为了ui的流畅,建议开个子线程,使用Worker,用postMessage把打包结束的结果传回来即可!
到上面这一步差不多了,我们需要再继续下一步,实时更新,即HMR实现,不然改一个地方,重新打包,不但耗费资源,客户体验也下降了!
解决方案也简单,对webpack HMR的更新文件做拦截,就是写写拦截器处理即可!也算是提高性能吧!
尾声
知难行易,很多事情就是去做了去试了才知道行不行!现在前端能做很多事,不再局限于页面开发,未来前端发展会更好!这里再次感谢所有大佬们的分享,解决了我不少困惑!大家如果喜欢小编的文章,多多关注啊!
版权声明:本文标题:聊聊如何让浏览器能运行webpack 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1725273276a1015984.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论