Javascript代码是如何被压缩的

通常我们用到的打包工具如 webpack,会在打包的时候将源代码合并在一个文件中,并且压缩成一行,去掉能去掉的空格、换行。合并代码这一步,是由 webpack 框架完成。压缩代码则是借助第三方混淆压缩代码库 terser 完成。

terser 的压缩分两步,压缩(compress)和混淆(mangle)。compress 负责去掉空格,将能合在一起的表达式合在一起。mangle 负责缩短变量的长度,又叫混淆。主要流程是构造 ast,遍历 ast,根据配置转换 ast。

Read more

从零实现一个JS模块打包器

2019 年的前端技术栈,无论你是用 Vue 还是用 React ,应该都离不开一样工具 – webpack。webpack 极大的简化了前端开发的构建过程,只需提供一个入口文件,webpack 就能自动帮我们分析出相关依赖,构建出 bundle 包。

webpack 很强大,但是大家知道 webpack 到底是怎么样打包的吗?本文将从一个很简单的例子,一步步带领大家探寻 webpack 打包的基本原理。

Read more

Webpack4升级指南

前言

webpack 彪版本号的速度真是飞快,4.0 发布没多久上去看的时候才 4.1.*,现在已经刷到 4.8.1 了,给人一种“我版本号很高了,可以安心升级了”的感觉,然而坑依然很多…尤其是 API 文档,到处可见 3.0 的陈旧信息。Code Splitting 章节点进去依然在讲 CommonsChunkPlugin ,CommonsChunkPlugin 点进去提示去看 SplitChunksPlugin,看文档的时候经常会迷失自我,心累…好了,吐槽完毕,下面是正文。需要直接复制粘贴的同学直接拉到最后~

Read more