前端优化，这是一个很大的范围。可能平时更多的文章是基于某一点去深入的讲解。所以趁机整理一套前端优化的基础大纲，一方面给让自己沉淀下这些知识，另一方面也方便后续优化时有个清单可以去对照着优化。

执行npm run lint-fix 将自动修复。无法修复的将在控制台给出提示。 原则上每次git commit前我们都需要先执行一下 lint-fix命令的，避免遗忘或者偷懒，我们使用预检查工具进行处理。 husky 是一个 npm 模块，可以在 git 提交前做拦截，如果拦…

这个插件大杀器，放在最后隆重介绍一下，随便放上去就行，为模块提供中间缓存的。 构建速度从最开始的 7s 优化到最后的 2.5s（主要是二次构建，缓存提效，你就说爽不爽吧）。 此项目是从零开发，后续此系列博客会根据实际开发进度推出（真 TMD 累），项目完成之后，会开放部分源码供…

最近工作很忙，迟迟没产出新文章，特来补上。虽说vue3已经正式版出现了（现在用最新的脚手架创建一个项目vue的版本就是3.0了），但是现在生态还没完善起来，掘金其他小伙伴已经做了很多vue3的分享，这边我就不做了，当然各位可以先去康康它👉（vue3）。今天的主要成员还是vue…

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

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

需要引入十几个css和js文件，而且因为他们彼此间有着依赖关系，所以引入的顺序还不能乱。 传统的html+css+js开发方式不能不能很好地运用less/scss等css预处理器以及ES6+的高级语法。 代码复用性差，可维护性差。 此时就需要一个处理这些问题的工具，webpac…

单元测试：指的是以原件的单元为单位，对软件进行测试。单元可以是一个函数，也可以是一个模块或一个组件，基本特征就是只要输入不变，必定返回同样的输出。一个软件越容易些单元测试，就表明它的模块化结构越好，给模块之间的耦合越弱。React的组件化和函数式编程，天生适合进行单元测试 TD…

需要读到入口文件里面的内容。 分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。 我们创建了add.js文件和minus.js文件,然后 在index.js中引入，再将index.js文件引入index.html。 现在我们打开index.html。你猜会发生什…