Webpack
10篇文章 · 0订阅
  • [译]JavaScript 调优：如何处理 bundle 大小 ｜ 技术点评
    有一个古老的故事，关于一个醉汉试图在路灯下找到他的钥匙。为什么？因为那是最明亮的地方。这是一个有趣的故事，但也是有关联的，因为作为人类，我们都倾向于走阻力最小的道路。 我认为我们在网络性能社区也有同样的问题。最近人们非常关注 JavaScript bundle 大小：你的依赖有…
    JavaScript
  • 前端起dev从110秒减少到7秒, 开发体验大幅提升
    webpack cache 发布3年多了, 在历史包袱中的项目中其实非常好用. 本文会介绍 cache 在一个项目中的实践经验, 和实现原理, 以及了解流程后的一些推论.
    前端 JavaScript Webpack
  • 从Webpack源码探究打包流程，萌新也能看懂～
    上一篇讲述了如何理解tapable这个钩子机制，因为这个是webpack程序的灵魂。虽然钩子机制很灵活，而然却变成了我们读懂webpack道路上的阻碍。每当webpack运行起来的时候，我的心态都是佛系心态，祈祷中间不要出问题，不然找问题都要找半天，还不如不打包。尤其是load…
    Webpack
  • Webpack tapable 源码研究
    大佬写的代码，当然值得一看了。 tapable源码的代码量够少，可以让我们花少量时间就能研究的明白，还能有所收获。 上一篇文章《Webpack tapable 使用研究》研究了tapable的用法，了解用法有助于我们理解源码。感兴趣可以看看。 看源码，第一感觉肯定是充满疑惑的。…
    Webpack
  • Webpack 源码研究
    将我的研究成果，画一个简要的流程图，如果您有兴趣看完，回头再看看这个流程图。 图片里的方块中文字的序号，就是运行的顺序。 通过我们以往对tapable的了解，知道可以通过钩子来监听Tapable类相应的事件，我们做相应的处理就行了。 写插件关键的问题不是注册钩子，而是compi…
    Webpack
    Webpack 源码研究
  • Webpack源码解读：理清编译主流程
    webpack的熟练使用已成为当代前端工程师必备的生存技能。毋庸置疑，webpack已成为前端构建工具的佼佼者，网络上关于如何使用webpack的技术文档层出不穷。但鲜有能将webpack的构建流程讲清楚的。本文尝试从解读源码以及断点调试的方式，来探究 webpack 是如何一…
    前端 Webpack
    Webpack源码解读：理清编译主流程
  • Webpack 原理浅析
    Webpack 迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的 Webpack。 假设某一天，我们接到了需求，需要开发…
    JavaScript Webpack
    Webpack 原理浅析
  • Webpack源码分析 - css是怎样被处理的
    很久很久以前我们在写页面时，通常将css单独写成文件引入，有时也直接在html里写css非常方便，这时页面也不多动效也不需要，写几个页面一把梭就能应付。 渐渐地网页成了大众获取信息的主要方式，这时的网站信息也越来越丰富，对网页的质量要求越来越高，这一时期一些前端自动化构建工具慢…
    Webpack
  • webpack优化实践(遇到很奇葩的问题)
    1. 用include或exclude来避免不必要的转义 2. 开启缓存将转译结果缓存至文件系统 3. DllPlugin/DLLReferencePlugin优化处理 处理第三方库有多种方式，externals、CommonsChunkPlugin、splitChunks、D…
    Webpack
    webpack优化实践(遇到很奇葩的问题)
  • 带你深度解锁Webpack系列(进阶篇)
    三篇长文，带你解锁 Webpack ，希望读完这三篇文章，你能够对 webpack 的各项配置有一个更为清晰的认识。 本文是第二篇，如果你还没有阅读《带你深度解锁Webpack系列(基础篇)》，建议阅读之后，再继续阅读本文。 本文会引入更多的 webpack 配置，如果文中有任…
    JavaScript 前端
    带你深度解锁Webpack系列(进阶篇)