作为前端开发人员，大家众所周知的是一个页面打开的速度对于用户体验和用户流失率来说至关重要，甚至可以说秒开是一个web项目的基本要求。接下来，我将分享一下如何用webpack神器进行web项目的性能优化。性能优化分为两部分，第一个部分是web打开时性能优化，另一个则是webpac…

我们知道 Webpack 可以通过 DLL 或者 Externals 做代码共享时 Common Chunk，但不同应用和项目间这个任务就变得困难了，我们几乎无法在项目之间做到按需热插拔。 模块联邦是 Webpack5 新内置的一个重要功能，可以让跨应用间真正做到模块共享，所以…

[实践系列] 主要是让我们通过实践去加深对一些原理的理解。 [实践系列]你能手写一个 Promise 吗？Yes I promise。 有兴趣的同学可以关注 [实践系列] 。 求 star 求 follow~ 入口起点(entry point)指示 webpack 应该使用哪个…

移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。 通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）。 而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如 1920*1080 指的是屏幕垂直方向和水平方向…

熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置，但是为了满足我们的项目需求还是要自己进行配置，不过我们可以使用一些 webpack 的预设值。同时 webpack 也拆成了两部分，webpack 和 webpack…

@babel/preset-env依赖了一些优秀的开源项目, 如browserslist, compat-table, electron-to-chromium... 对基于浏览器或者Electron的项目, 我们推荐使用一个.browserslistrc文件指定编译目标.如果…

入口处在bulid.js,可以看到其中的代码是先实例化webpack，然后调用compiler的run方法。 可以看出options保存的就是本次webpack的一些配置参数，而其中的plugins属性则是webpack中最重要的插件。 调用run时，会先在内部触发before…

上期通过项目优化分享和实例解析：在淘宝优化了一个大型项目，分享一些干货（代码实例，图文结合），把 webpack 打包优化利器 SplitChunksPlugin 系统讲解了一遍。本期进一步深入，分析 SplitChunksPlugin 源码，搞清楚 webpack 是怎么和 …

最近这段时间由于疫情的原因，在家实在闷得慌，所以看了下 js 的一些基础知识，从前不是很了解的 Promise 突然豁然开朗了不少，于是就赶紧趁热打铁写下来（这就是温故而知新的感觉吗，哈哈哈😁）。 一个很显然的原因就是它的链式调用能够解决回调地狱带来的一些问题（不利于阅读与维…