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

首先这篇文章是读 vue.js 源代码的梳理性文章，文章分块梳理，记录着自己的一些理解及大致过程；更重要的一点是希望在 vue.js 3.0 发布前深入的了解其原理。 如果你从未看过或者接触过 vue.js 源代码，建议你参考以下列出的 vue.js 解析的相关文章，因为这些文…

自从几年前 Webpack 替换掉了 Gulp、Grunt 后，我们可以明显看到前端项目的工程复杂度越来越高，前端技术迭代速度也越来越快。 大厂也好、培训班也罢，都针对 Webpack、Babel 、ESLint 前端工程工具三巨头贡献出了数不胜数分享和案例。 但是随之而来的是…

没有什么比时间更具有说服力了，因为时间无需通知我们就可以改变一切。 Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使…

单行简洁的代码很难维护（有时甚至难以理解），但这并不能阻止广大攻城狮们脑洞，在编写简洁的代码后获得一定的满足感。 以下我最近的一些收藏javascript精简代码集合。它们都可以在你的开发控制台中运行，你可以从控制台中查看运行结果。同时，我希望你能在评论中分享一些自己的藏品！ …

将client端的代码转换成server可以执行的代码(es6 => commonjs). 在两端组合出一套模式相同的代码逻辑.下面的例子中在server和client端使用不同的react-router提供的组件. server端路由匹配,组装资源(css, js, data…

大家好，我是神三元。 今天我们来做一个小玩意，用原生JS封装一个动画插件。效果如下： 这个飞驰的小球看起来是不是特有灵性呢？没错，它就是用原生JS实现的。 接下来，就让我们深入细节，体会其中的奥秘。相信这个实现的过程，会比动画本身更加精彩! 封装一个插件，将小球的DOM对象作为…

写Vue有很长一段时间了，除了常规的业务开发之外，也应该思考和反思一下封装组件的正确方式。以弹窗组件为例，一种实现是在需要模板中引入需要弹窗展示的组件，然后通过一个flag变量来控制弹窗的组件，在业务代码里面会充斥着冗余的弹窗组件逻辑，十分不优雅。 本文整理了开发Vue组件的一…

1. 1 什么是WebPack webpack 是一个现代 JavaScript 应用程序的静态模块打包工具：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并生成一个或多个 bundl…