SourceMap的用途 前端工程打包后代码会与源码产生不一致，当代码运行出错时控制台会定位出错代码的位置。SourceMap的用途是可以将转换后的代码映射回源码，如果你部署了js文件对应的map文件资源，那么在控制台里调试时可以直接定位到源码的位置。 SourceMap的格式 我们可以生成一个SouceMap文件看看里面的字段分别都对应什么意思，这里使用webpack打包举例。 源码： //src/index.js function a() {   for (let i = 0; i < 3; i ) {     console.log('s');   } } a(); 打包后的代码： //dist/main-145900df.js !function(){for(let o=0;o<3;o )console.log("s")}(); //  sourceMappingURL=main-145900df.js.map .map文件： //dist/main-145900df.js.map {   "version"

提升首屏的加载速度，是前端性能优化中 最重要 的环节，这里笔者梳理出一些 常规且有效 的首屏优化建议 目标： 通过对比优化前后的性能变化，来验证方案的有效性，了解并掌握其原理 1、路由懒加载 ------------- SPA 项目，一个路由对应一个页面，如果不做处理，项目打包后，会把所有页面打包成一个文件， 当用户打开首页时，会一次性加载所有的资源 ，造成首页加载很慢，降低用户体验 列一个实际项目的打包详情： app.js 初始体积：  1175 KB ...

一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意，本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体来说，在 webpack 项目中，有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。 图1 Tree-shaking 较早由 Ri...

一、前言 -------- 本文是 [从零到亿系统性的建立前端构建知识体系✨](https://juejin.cn/post/7145855619096903717 "https://juejin.cn/post/7145855619096903717") 中的第三篇，整体难度 ⭐️⭐️⭐️。 在本文中我们将会深挖 AST（抽象语法树） 以及基于 AST 衍生出来的一系列实际应用。读完本章你会收获什么： AST（抽象语法树） 到底是什么？ AST基础：从零到一手撸一个功能完备的编译器 AST基础：[Babel](https://link.juejin.cn/?target=https%3A%2F%2Fbabeljs.io%2Fdocs%2Fen%2F "https://babeljs.io/docs/en/") 的设计理念 AST的应用：手写console插件，再也不怕打开控制台满屏的console了😭😭😭 AST的应用： [ES6](https://link.juejin.cn/?target=https%3A%2F%2Fwww.w3...

相关问题 Babel 是什么 Babel 有什么用 压缩代码如何实现 回答关键点 JS 编译器 AST 插件系统 Babel 是 JavaScript 编译器 ：他能让开发者在开发过程中，直接使用各类方言（如 TS、Flow、JSX）或新的语法特性，而不需要考虑运行环境，因为 Babel 可以做到按需转换为低版本支持的代码；Babel 内部原理是将 JS 代码转换为 AST ，对 AST 应用各种插件进行处理，最终输出编译后的 JS 代码。 知识点深入 1\. AST 抽象语法树 简单定义 ：以树的形式来表现编程语言的语法结构。 利用在线 [playground](https://astexplorer.net/) 调试，可以对 AST 有个直观感受：生成的树有多个节点，节点有不同的类型，不...

CI/CD是什么？如何理解持续集成、持续交付和持续部署 概述 CI/CD 是一种通过在应用开发阶段引入[自动化](https://www.redhat.com/zh/topics/automation/whats-it-automation)来频繁向客户交付应用的方法。CI/CD 的核心概念是持续集成、[持续交付](https://www.redhat.com/zh/topics/devops/what-is-continuous-delivery)和持续部署。作为一个面向开发和运营团队的解决方案，CI/CD 主要针对在集成新代码时所引发的问题（亦称："[集成地狱](https://www.solutionsiq.com/agile-glossary/integration-hell/)"）。 具体而言，CI/CD 可让持续自动化和持续监控贯穿于应用的整个生命周期（从集成和测试阶段，到交付和部署）。这些关联的事务通常被统称为"CI/CD 管道"，由[开发和运维团队](https://www.redhat.com/zh/topics/devops)以敏捷方式协同支...

之前找工作的时候因为在简历上写“熟练使用 rollup.js 进行构建”，但回答不出 rollup 能打包出哪几种格式，我差点被面试官鄙视。 确实不应该！ 于是重新学习和梳理了一遍，和大家一起分享。 学习本文 📖 你将： 1. 弄明白vite和rollup输出的几种格式，了解它们之间的关系和使用场景。 2. 获得一份最简单的 rollup.js 打包 demo 一份。 3. 这份 demo 还为每个打包结果准备了一个可执行 demo of demo 为什么要学这个？ -------- 伴随着 vite.js 越来越火，它也变成了工作生产和 面试问答 时被经常提及的问题。 众所周知， vite.js 构建的核心是 rollup.js 。 那为什么在学习它们之前，有必要先学习 js 模块化规范？ 因为我们需要理解它们最终的产物是什么，是如何运作的。 “崇拜魔法”是编程学习者的大忌，“好奇心”才是我们成长与进步的阶梯。 让我们解开神秘的面纱，看看那些打包后的代码，都是些“什么玩意儿”！ DEMO与示...

📖阅读本文，你将: 1. 对 rollup 有初步认识，理解它的主要使用场景。 2. 跟随作者一一了解那些 主流插件都能做什么 。（官方文档的一句话简介太难以理解了） 3. 收获一系列（13组） demo 源码，可以 fork 下来肆意摆弄。 前言、有了 webpack , 为啥还需要 rollup 提到 rollup 它总是被提出来 webpack 进行比较，但真正使用过 rollup 的人却可以清晰地感受到，小巧轻便的它，真正的发力点和 webpack 并不相同： webpack 的一个理念是“万物皆是模块”，在此理念下， webpack 具备强力的处理各类资源，构建 web应用 的能力，当前第 version 5.x 引入的“模块联邦”更是奠基了微应用时代的霸主地位。 rollup.js 从一开始，就没有那样宏大的愿景，它描述自己是：“一个 JavaScript 模块打包器”。致力于“将小块的代码编译成大的复杂的代码”。 哪怕它后续也具备了各种各样的插件，但这些插件实际上也只是这个“ J...

现在很多打包工具压缩一个js都会生成一个source map。source map可以帮助我们调试线上的代码，因为压缩后的代码往往是一行，利用source map可以将代码还原，那么source map是如何工作的？ 位置映射 source map中有一个mapping(映射),它记录了一个文件处理前后的所有内容的位置映射关系，这是它可以还原内容的核心，现在看看咋映射的： 假设现在有a.js，内容为feel the force，处理后为b.js，内容为the force feel，那么mapping应该是多少呢？ 上图可以看到，所谓映射，就是指一个字符从一个位置移动到了另一个位置，然后我们将这个位置的变换记录下来。就好比我们在家里打扫卫生，我们要把家具发生移动，同时我们要记住每个家具之前在什么位置，这样等我们打扫完了，就可以还原了。 我们把每个字符的位置移动都写成一种固定的格式，里面包含了之前的位置（输入位置）和...

本文译自：https://css-tricks.com/comparing-the-new-generation-of-build-tools/ 在过去的一年里，出现了一批新的开发者工具，它们正在紧跟过去几年主导前端开发的工具，包括 webpack、Babel、Rollup、Parcel、create-react-app 。 这些新的工具并不是为了完成完全相同的功能而设计的，每个工具都有不同的目标和功能。尽管存在差异，但这些工具有一个共同的目标： 改善开发者体验 。 概览 -- esbuild Snowpack Vite wmr Feature comparison Wrapping up 具体来说，我想对每一个进行评估，概述它们的作用，...

一、背景 Webpack 最初的目标是实现前端项目的模块化，旨在更高效地管理和维护项目中的每一个资源 模块化 最早的时候，我们会通过文件划分的形式实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的 JS 文件中 约定每个文件是一个独立的模块，然后再将这些 js 文件引入到页面，一个 script 标签对应一个模块，然后调用模块化的成员 html <script src="module-a.js" </script <script src="module-b.js" </script 但这种模块弊端十分的明显，模块都是在全局中工作，大量模块成员污染了环境，模块与模块之间并没有依赖关系、维护困难、没有私有空间等问题 项目一旦变大，上述问题会尤其明显 随后，就出现了命名空间方式，规定每个模块只暴露一个全局对象，然后模块的内容都挂载到这个对象中 js window.moduleA = { method1: function () { console.log('moduleA method1') } }

一、是什么 webpack proxy ，即 webpack 提供的代理服务 基本行为就是接收客户端发送的请求后转发给其他服务器 其目的是为了便于开发者在开发模式下解决跨域问题（浏览器安全策略限制） 想要实现代理首先需要一个中间服务器， webpack 中提供服务器的工具为 webpack-dev-server webpack-dev-server webpack-dev-server 是 webpack 官方推出的一款开发工具，将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起 目的是为了提高开发者日常的开发效率， 只适用在开发阶段 关于配置方面，在 webpack 配置对象属性中通过 devServer 属性提供，如下： js // ./webpack.config.js const path = require('path') module.exports = { // ... devServer: { contentBase: path.join(__dirname, 'dist'

一、背景 随着前端的项目逐渐扩大，必然会带来的一个问题就是性能 尤其在大型复杂的项目中，前端业务可能因为一个小小的数据依赖，导致整个页面卡顿甚至奔溃 一般项目在完成后，会通过 webpack 进行打包，利用 webpack 对前端项目性能优化是一个十分重要的环节 二、如何优化 通过 webpack 优化前端的手段有： JS代码压缩 CSS代码压缩 Html文件代码压缩 文件大小压缩 图片压缩 Tree Shaking 代码分离 内联 chunk 2.1 JS代码压缩 terser 是一个 JavaScript 的解释、绞肉机、压缩机的工具集，可以帮助我们压缩、丑化我们的代码，让 bundle 更小 在 production 模式下， webpack 默认就是使用 TerserPlugin 来处理我们的代码的。如果想要自定义配置它，配置方法如下： js const TerserPlugin = require('terser-webpack-plugin') module.exports = {

一、背景 随着我们的项目涉及到页面越来越多，功能和业务代码也会随着越多，相应的 webpack 的构建时间也会越来越久 构建时间与我们日常开发效率密切相关，当我们本地开发启动 devServer 或者 build 的时候，如果时间过长，会大大降低我们的工作效率 所以，优化 webpack 构建速度是十分重要的环节 二、如何优化 常见的提升构建速度的手段有如下： 优化 loader 配置 合理使用 resolve.extensions 优化 resolve.modules 优化 resolve.alias 使用 DLLPlugin 插件 使用 cache-loader terser 启动多线程 合理使用 sourceMap 1.2 优化loader配置 在使用 loader 时，可以通过配置 include 、 exclude 、 test 属性来匹配文件，接触 include 、 exclude 规定哪些匹配应用 loader 如采用 ES6 的项目为例，在配置 babel-loader 时，