由于 Lynx(公司自研跨端框架)编译工具和传统Web编译工具链有较大的差别（如不支持动态 style 和动态 script 基本告别了 bundleless 和 code splitting，模块系统基于 json 而非 js，没有浏览器环境)，且有在 Web 端实时编译(搭…

前一段时间我把webpack源码大概读了一遍，webpack 到4.x版本后，其源码已经比较庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。 过度分析源码对于大家并没有太大的帮助。本文主要是想通过分析webpack的构建流程以及实现一个简单的webpack来让大家对we…

Webpack 迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的 Webpack。 假设某一天，我们接到了需求，需要开发…

page-skeleton-webpack-plugin是一款由ElemeFE团队开发的webpack 插件，该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。 对页面中元素进行删减或增添，对已有元素通…

一. 什么是Tree-shaking 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当…

前几天 webpack 作者 Tobias Koppers 发布了一篇新的文章 webpack 4.0 to 4.16: Did you know?(需翻墙)，总结了一下webpack 4发布以来，做了哪些调整和优化。 并且说自己正在着手开发 webpack 5。 正好我也在使…

在webpack打包的过程中有没有想过这其中的打包过程是怎么样的呢？有没有什么办法能反映出这个打包的过程和结果呢？webpack打包太慢需要优化怎么办呢？或许以下这几款插件能帮助到你，记得点个赞哈哈。 这款插件能把打包的进度以进度条的形式显示出来，同时也可以自定义显示百分比的格…

所谓【静态资源依赖分析】，指的是可以通过分析页面资源后，可以以 json 数据或者图表的方式拿到页面资源间的依赖关系。 对一个多页面 repo 而言，每次要发布的时候，我希望通过 git diff 拿到本次改动的文件，再通过依赖分析拿到此次需要构建的资源，这样就可以做到单页面发…

假设如果没有构建工具会有什么影响？第一，线上的代码是可以直接被观赏的，也就相当于你没有穿衣服，直接暴露了身体器官，别人一看就知道你是 GG 还是 MM。第二，在编写当今社会比较流行的React 和 Vue 框架时，浏览器大哥并无法识别你编写的 jsx 和 一些指令。第三，当你在…