随笔分类 - 前端工程
摘要：前端中常用的模块格式主要有：CommonJS、ESM、AMD. 模块化方式特点使用场景代码示例 CommonJS 同步加载模块 主要用于 Node.js 环境 服务器端（Node.js）使用 module.exports 或 exports 对外暴露模块 使用require导入模块 const ad
阅读全文
摘要：在 Webpack 插件开发中，apply 方法是插件的核心入口。每个 Webpack 插件都是一个包含 apply 方法的对象，Webpack 在运行时会调用这个方法，将 Webpack 的编译器（compiler）对象作为参数传递给它，从而允许插件挂载到 Webpack 的事件系统中，并通过钩子
阅读全文
摘要：一、前端错误的捕获 在 JavaScript 日志系统中，捕获错误的范围应该全面，涵盖前端应用中可能出现的各类问题，包括语法错误、运行时错误、资源加载错误以及用户行为异常等。以下是不同类型错误的捕获方法： window.onerror: 可捕获常规错误（变量未定义、函数调用错误等）、计时器等错误，但
阅读全文
摘要：特性WebpackRollupViteRspackSWCEsbuild 文件输入 单文件或多文件 单文件或多文件 单文件或多文件 单文件或多文件 单文件或多文件 单文件或多文件 原目录输出 ✅ 支持 ✅ 支持 ✅ 支持 ✅ 支持 ❌ 不支持 ✅ 支持 文件捆绑 ✅ 支持 ✅ 支持 ✅ 支持 ✅ 支持
阅读全文
摘要：http://ftp.mozilla.org/pub/firefox/releases/
阅读全文
摘要：1. env中的es版本和parserOptions.ecmaVersion的区别？ "env": { "es2021": true }, "parserOptions": { "ecmaVersion": es2021 } parserOptions.ecmaVersion指示eslint解析器可
阅读全文
摘要：es11(2020)实现了对动态import的支持： import('./dynamic.js').then(({ default: foo }) => foo()); 在使用rollup编译时，如果输出为cjs模块，则会被编译为： Promise.resolve().then(function (
阅读全文
摘要：https://www.npmjs.com/package/lodash-webpack-plugin 当使用 import isString from 'lodash-es/isString'这种带路径的导入方法时，传统的externals写法无效,见bug，需要使用单独的函数来处理，开源实现方案
阅读全文
摘要：范文杰的webpack系列文章 webpack5知识体系
阅读全文
摘要：https://juejin.cn/post/6992944363798003743
阅读全文
摘要：一、webpack热更新原理 1.使用 webpack-dev-server (后面简称 WDS)托管静态资源、提供websocket服务 2.webpack打包时会将HMR Runtime和源代码一起编译成 bundle 文件。HMR Runtime主要 负责接收服务发送的websocket消息，
阅读全文
摘要：一、通用的指标 性能指标英文缩写描述该指标代表的问题 首字节时间 TTFB (Time to First Byte) 浏览器开始请求到接收到第一个字节数据的时间。 网络延迟、服务端慢、SSR 渲染慢 首次绘制 FP (First Paint) 浏览器首次在屏幕上开始绘制任何像素的时间。 网络慢、HT
阅读全文
摘要：刚接触bable的同学可能会认为使用了Babel，配置了preset预设后就可以愉快的使用 es6+做开发了，事实上，在默认情况下Babel只会做语法转换(let、const、class、箭头函数等)，而不做新api的转换，新的api总结起来分为两类： 全局对象和全局对象相关的方法，例如Promis
阅读全文
摘要：一、配置文件 几乎所有的前端工程师都知道可以用babel将es6+的语法转换为es5，转换工具要么使用babel-cli，要么使用webpack的babel-loader，不管使用哪种转换工具，通常都需要一个配置文件来建立转换规则（也可以在webpack的babel-loader的配置项，原理都一样
阅读全文
摘要：https://github.com/sorrycc/blog/issues/80
阅读全文
摘要：知乎微前端专题 微前端完整解读 —— 场景分析及 Qiankun 原理介绍 微前端框架 之 qiankun 从入门到源码分析 微前端框架 之 single-spa 从入门到精通 qiankun 技术圆桌 微服务:从Single-SPA到类Single-SPA初探 滴普微前端实践系列之二：实践篇 if
阅读全文
摘要：1. 使用calc函数时，100%参与计算该如何表示？ cacl(~"100% - 20px")； 2. webpack.resolve.alias中定义的路径映射符在less中该如何使用? webpack映射如下: less中使用时： background: url('~img/dataManag
阅读全文
