最近在前端论坛闲逛，看到了一些讲parcel、webpack的文章，就突然很好奇，每天都在用的打包工具，他们打包的原理究竟是什么。只有知道了这一点，才可以在众多的打包工具里，找到最适合的那个它。在了解打包原理之前，先花一些篇章说明了一下为什么要使用打包工具。 前端产品的交付是基…

有兴趣的同学可以自行研究。 这样，你就会发现只有路由匹配的时候，组件才被import进来，达到了code splitting的效果，也就是我们常说的按需加载，代码分块，而不是一开始就将全部组件加载。 可以观察到，点击不同的路由都会加载一个chunk.js，这就是我们所分的块。…

为什么使用 webpack，这应该是和前端的发展有关系的，我认为，webpack 是前端发展到一定阶段的必然产物（貌似是一句废话）。 因为计算机网络的飞速发展，导致 web 前端也在迅猛发展。最初的实践方案已经不能满足我们的需求，于是，越来越多的新技术新思想新框架孕育而生，比如…

近年来，作为传统动态网站基础架构的替代方案，现代静态网站生成器日渐盛行。在 StaticGen 上有一个关于静态站点生成器的开源目录，2017 年该网站追踪了超过一百个生成器，并见证了这些生成器在这一年的流行趋势。本文整理了 StaticGen 目录中排名前 20 的静态网站生…

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。用户滚动到它们之前，可视区域外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。常适用图片很多，页面很长的电商网站场景中。 能提升…

作为互联网项目，最重要的便是用户体验。在举国“互联网+”的热潮中，用户至上也已经被大多数企业所接收，特别是在如今移动端快速发展的时代，我们的网页不仅只是呈现在用户的PC浏览器里，更多的时候，用户是通过移动产品浏览我们的网页。加之有越来越多的开发者投入到Web APP和Hybri…

前端重构程序员是一个关注代码同时还要留意体验的异类。代码的优化虽然难，但是有比较多的性能测试工具去证明优化的成果。然而体验这种东西，我们又要如何去证明它的好与坏呢？ 今天我着重会基于「webnovel」PC站点从以上两点给大家介绍，如何从体验的角度去做重构的优化，并如何用数据去…

webpack是现代前端开发中最火的模块打包工具，只需要通过简单的配置，便可以完成模块的加载和打包。那它是怎么做到通过对一些插件的配置，便可以轻松实现对代码的构建呢？ Plugins：Loaders将各类型的文件处理成webpack能够处理的模块，plugins有着很强的能力。…

本文约6000余字，阅读需要10分钟左右。 有人说，前端工程师的网络基础很弱，说很多都是非计算机的，门槛低，其实不能一概而论。但是既然人家吐槽了，那我们就提高自己呗。 前端工程师对这句话应该有比较深刻的感受吧，这也可能是前端变化真的太 TM 的快了。但变化的这么快，总是要沉淀下…