关于 来源：https://github.com/nimojs/gulp-book gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。 在 Web 前端开发工作中有很多“重复工作”，比如压缩CSS/JS文件。而这些工作都是有规律的。找到这 些规律，并编写 gulp 配置代码,让 gulp 自动执行这些“重复工作”。 将规律转换为 gulp 代码 文件，当某个文件被修改时，自动压缩修改文件。启动 gulp 后就可以让它 帮助你自动构建 Web 项目。 gulp 还可以做很多事，例如： 1. 压缩CSS 2. 压缩图片 3. 编译Sass/LESS 4. 编译CoffeeScript 5. markdown 转换为 html gulp 入门指南 - 2 - 本文档使用 看云 构建 安装 Node 和 gulp gulp 是基于 node [21:11:01] Starting 'script'... [21:11:01] Finished 'script' after 2.85 ms 至此，我们完成了 gulp 压缩 js 文件的自动化代码编写。 注意： 注意：使用 gulp.watch 后你的命令行会进入“运行”状态，此时你不可以在命令行进行其他操作。可通 过 Ctrl + C 停止 gulp。 Mac 下使用 control

包，并且 执行 CLI webpack-cli 做的事情 引入 yargs，对命令行进行定制 分析命令行参数，对各个参数进行转换，组成编译配置项 引用webpack，根据配置项进行编译和构建 从NON_COMPILATION_CMD分析出不需要编译的命令 const { NON_COMPILATION_ARGS } = require("./utils/constants"); const return require("./utils/prompt-command")(NON_COMPILATION_CMD, ...process.argv); } webpack-cli 处理不需要经过编译的命令 NON_COMPILATION_ARGS的内容 const NON_COMPILATION_ARGS = [ "init", //返回与本地环境相关的一些信息 ]; webpack-cli 提供的不需要编译的命令 命令行工具包 yargs 介绍 提供命令和分组参数 动态生成 help 帮助信息 webpack-cli 使用 args 分析 参数分组 (config/config-args.js)，将命令划分为9类：

⻓期缓存：确定的模块 Id、chunk 和导出名称 持久化缓存 在 webpack 4 ⾥⾯，可以使⽤ cache-loader 将编译结果写⼊硬盘缓存，还可以使⽤ babel-loader，设置 option.cacheDirectory 将 babel-loader 编译的结果写进磁盘。 webpack 5 缓存策略 • 默认开启缓存，缓存默认是在内存⾥。可以对 cache 进⾏设置 。 • template 的部分 进⾏渲染 Vite 打包流程 – vue 脚本打包策略 判断是否是 .css 文件的请求 判断是否为 JS 中 import 的 CSS 进行 Sass/Less 的编译处理 基于 CSS 的源码包装成 JS 的模块 Vite 打包流程 – CSS 资源打包策略 将 CSS 源码加工成 JS 模块 updateStyle 会通过 CSS Style Shee 如果开启了 CSS Module，则直接导出成一个 对象，否则导出 CSS 代码 Vite 打包流程 – CSS 资源打包策略 Vite 打包流程 –模板打包策略 @vue/compiler-dom 编译 template，然后返回给浏览器

"node_modules/mocha/bin/_mocha” }, npm i mocha chai -D 4. 执行测试命令 npm run test 持续集成的作用 优点： 核心措施是，代码集成到主干之前，必须通 过自动化测试。只要有一个测试用例失败， 就不能集成。 ·快速发现错误 ·防止分支大幅偏离主干 Github 最流行的 CI 接入 Travis CI 1. https://travis-ci.org/

the best feature! Rspack 有哪些特性？ ??? Rust 实现核心部分，充分利用并发和 LTO 优化 Rspack 有哪些特性？ ???️ O(≈1) 增量 HMR，只编译修改的模块 Rspack 有哪些特性？ ⚡️ Dev 启动耗时 Rspack 有哪些特性？ 一些业务收益 Webpack Rspack 提升 build 380s 28s 13 倍 dev Webpack 迁移到 Rspack？ ??? Rust is faster than JavaScript • 优先使用内置功能 • SWC > babel-loader，Rspack 使用 SWC 编译 JavaScript 代码 • experiments.css > style-loader + css-loader，Rspack 使用 SWC 实 现了 experiments.css，默认开启 支持更多常用框架：Vue、Qwik 等 2. 完善插件 API，兼容更多 Webpack 生态 3. 支持 Module Federation 模块联邦 4. 支持 Lazy Compilation 懒编译 5. 支持 Persistent Cache 持久缓存 6. 更多生产环境优化策略 7. 持续优化构建性能 感谢 ??? Rspack 的实现离不开以下项目 ??? 了解更多 • 官方文档

entry: { app: './src/app.js', adminApp: './src/adminApp.js' } }; 核⼼心概念之 Output Output ⽤用来告诉 webpack 如何将编译后的⽂文件输出到磁盘 Output 的⽤用法：单⼊入⼝口配置 module.exports = { entry: './path/to/my/entry/file.js' output: { filename: on port 3000!\n'); }); WDM 将 webpack 输出的⽂文件传输给服务器器 适⽤用于灵活的定制场景 热更更新的原理理分析 Webpack Compile: 将 JS 编译成 Bundle HMR Server: 将热更更新的⽂文件输出给 HMR Rumtime Bundle server: 提供⽂文件在浏览器器的访问 HMR Rumtime: 会被注⼊入到浏览器器，

的模块名只能是字符串串常量量 · import binding 是 immutable的 代码擦除： uglify 阶段删除⽆无⽤用代码 现象：构建后的代码存在⼤大量量闭包代码 编译后（bundle.js） 编译前 (source code) 会导致什什么问题？ 运⾏行行代码时创建的函数作⽤用域变多，内存开销变⼤大 ⼤大量量作⽤用域包裹代码，导致体积增⼤大（模块越多越明显） 模块转换分析

Externals 思路：将 react、react-dom 基础包通过 cdn 引入，不打入 bundle 中 方法：使用 html-webpack-externals- plugin 进一步分包：预编译资源模块 思路：将 react、react-dom、redux、react-redux 基础包和业务基础包打包成一个文件 方法：使用 DLLPlugin 进行分包，DllReferencePlugin