这里所述的组件库动态加载和 webpack 构建项目的懒加载是不同的，此文将以 babel-plugin-import 插件为主，讲解组件库按需加载方案的实现原理。

一、什么是 Tree Shaking Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确

为方便初学者快速上手，暂时抛开那些晦涩的概念，直接跟着笔者写一个 webpack 插件，来感受一下吧。笔者这里的代码是基于 webpack 5.x 版本写的，跟 4.x 版本有一定差异。这是一篇入门文，如果已经有基础，就不需要看此文了。 我们假设这样一个场景：发布静态资源之后，…

那么，你开始学 Vite 了吗？用过 Vite 的同学应该都熟悉，创建一个 Vite 的项目模版是通过 npm init @vitejs/app 的方式。而 npm init 命令是在 npm@6.1.0 开始支持的，实际上它是先帮你安装 Vite 的 @vitejs/crea…

whistle 是一个基于 Node.js 的跨平台网络调试工具。最近随着 Nohost 的开源，有不少同学问了 whistle 相关的问题，本篇文章将结合几个常见的业务场景介绍如何在本地前端项目开发中使用 whistle 。 如今，大部分的前端项目是以 webpack 作为开…

yarn 是在工作中离不开的工具，但在工作中，很多人基本只会使用 yarn install，而且会手动删除 node-modules，或删除 yarn.lock 文件等不规范操作。本文将从一些基础的知识点开始介绍，循序渐进的让你对 Yarn 有一个更深入的了解，来保证规范的使用…

最近公司在推行单元测试，但是一些同事对于单元测试只是了解，甚至不怎么了解。因此推动单元测试的阻碍是有的，这种阻碍除了人的层面，还有基础设施的层面。希望通过本文，一方面加深大家对前端测试最佳实践的认知，另一方面可以作为手册，在日常开发中做参考。本文也会不断更新，期待你的参与。 如…

三篇长文带你解锁 Webpack ，希望读完这三篇文章，你能够对 webpack 的各项配置有一个更为清晰的认识。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器，当 webpack 处理应用程序时，会递归构建一个依赖关系图，其中包含应用程序需要的每…

本项目是淘系用户增长团队的一个大中台系统，单页应用，涵盖很多业务功能，运用了很多懒加载页面组件来提升性能，首屏时间 1s 左右，体验良好。然而大项目文件很多，导致构建和发布时间很长，内存占用较大。我的任务是尽可能优化与此相关的问题。 首先不难发现问题并不在用户体验上，而在于开发…