当我们使用 Vite 进行开发时，会进行依赖预构建，即将第三方依赖进行打包，并在开发环境下使用这些打包过的第三方依赖。
Rollup是一个JavaScript模块打包器，它可以将多个模块打包成一个单独的文件，以便在浏览器中使用。与其他打包工具相比，Rollup的主要优势在于它可以生成更小、更快的代码。在本文中，我们将深入了解Rollup的常用配置的使用方法。
项目团队成员希望能够禁用某些 JS 依赖。比如有团队成员希望使用 lodash 而将这个巨大的依赖引入项目，导致项目整体过分臃肿。团队成员应当使用 lodash-es 来避免这种情况。那么 ESLint 就提供了一个名为 no-restricted-imports 规则，这个规则就是统一规范在项目中禁止使用的依赖。
是的，在webpack v4中，不再需要配置UglifyjsWebpackPlugin。（详情请见：文档） 取而代之的是，更加方便的配置方法。
我们在 《快速理解 Vite 的依赖预构建》[1] 中，已经详细讲述过 Vite 预构建的步骤：
最近在使用 Vite4.0 构建一个中型前端项目的过程中，遇到了一些坑，也做了一些项目在构建生产环境时的优化，在这里做一个记录，以便后期查阅。(完整配置在后面)
CommonJS和UMD兼容性:在开发过程中，Vite的dev将所有代码作为本地ESM服务。因此，Vite必须首先将作为CommonJS或UMD发布的依赖项转换为ESM。
Rollup 设计之初就是面向 ES Module 的，构建出结构扁平，性能出众的类库。
大家好，我是码农小余。我们知道，首次执行 vite 时，服务启动后会对 node_modules 模块和配置 optimizeDeps 的目标进行预构建。本节我们就去探索预构建的流程。
最近从小被子那里学了不少 Tree-shaking 的知识，Tree-shaking 译作“摇树优化”，是 DCE（Dead Code Elimination）优化的一种实现。
当 ES Module 最开始作为一种新的 JavaScript 模块化方案在 ES6 中被引入的候，其实是通过在 import 语句中强制指定相对路径或绝对路径来实现的。
最近在看Vue_shop实战项目-电商管理系统(Element-UI)的B站视频，看到 P172 08.商品添加-把goods_cat从数组转换为字符串时，讲到了Lodash这个工具库的cloneDeep方法的使用。 Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库,其官网地址为：https://www.lodashjs.com/，Github托管地址为：https://github.com/lodash/lodash
不知道有没有朋友有这种经历。雄心勃勃的打开一个开源框架的源码，开始看，一行一行的看下去，看了几行就感觉，“我艹，这什么玩意儿”，然后就看不下去了。如果你有类似的经历，可以看看本文，本文会以几个常见开源库为例讲解几种常见的开源框架的代码架构，从架构出发，帮你轻松读懂框架源码。记住以下两个要点：
在这篇文章中，我们将研究什么是 CommonJS，以及为什么它会使你的 JavaScript 包变得那么大。
Bevy 是一个用 Rust 构建的简单易用、数据驱动的游戏引擎。它具有以下特点和优势：
上一篇文章主要从 Native 的角度分析了 React Native 的初始化流程，并从源码出发，总结了几个 React Native 容器初始化的优化点。本文主要从 JavaScript 入手，总结了一些 JS 侧的优化要点。
随着项目规模增大，小程序分包优化是必须要面对的问题。分包不合理，不仅影响项目迭代和上线计划，还关乎用户体验，甚至因此导致 C 端用户流失。本文主要介绍京东快递小程序分包过程中踩过的坑，以及小程序分包优化的一些建议。
右边就是可以修改的了,左边紫色的状态就是被拦截了,点上面的小圆圈暂停就是停止掉。
当ES模块第一次在ECMAScript 2015中被引入，作为在JavaScript中标准化模块系统的一种方式时，它是通过在import语句中指定相对或绝对路径来实现的。
.markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{font-size:30px;margin-bottom:5px}.markdown-body h2{padding-bottom:12px;font-size:24px;border-bottom:1px solid #ececec}.markdown-body h3{font-size:18px;padding-bottom:0}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:15px}.markdown-body h6{margin-top:5px}.markdown-body p{line-height:inherit;margin-top:22px;margin-bottom:22px}.markdown-body img{max-width:100%}.markdown-body hr{border:none;border-top:1px solid #ddd;margin-top:32px;margin-bottom:32px}.markdown-body code{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:#fff5f5;color:#ff502c;font-size:.87em;padding:.065em .4em}.markdown-body code,.markdown-body pre{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{overflow:auto;position:relative;line-height:1.75}.markdown-body pre>code{font-size:12px;padding:15px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:#333;background:#f8f8f8}.markdown-body a{text-decoration:none;color:#0269c8;border-bottom:1px solid #d1e9ff}.markdown-body a:active,.markdown-body a:hover{color:#275b8c}.markdown-body table{display:inline-block!important;font-size:12px;width:auto;max-width:100%;overflow:auto;border:1px solid #f6f6f6}.markdown-body thead{background:#f6f6f6;color:#000;text-align:left}.markdown-body tr:nth-child(2n){background-color:#fcfcfc}.markdown-body td,.markdown-body th{padding:12px 7px;line-height:24px}.markdown-body td{min-width:120px}.markdown-body blockquote{color:#666;padding:1px 23px;margin:22px 0;border-left:4px solid #cbcbcb;background-color:#f8f8f8}.markdown-body blockquote:after{display:block;content:""}.markdown-body blockquote>p{margin:10px 0}.markdown-body ol,.markdown-body ul{padding-left:28px}.markdown-body ol li,.markdown-body
在本次Webpack 4教程中，我们会更进一步讲述项目优化。我们会学习什么是tree shaking以及如何使用它。你会找到让Webpack 4中tree shaking运作起来所需要的东西，并知道怎样从中受益。开始吧！
Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的vue3,vite2,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
使用 ant-design-vue 进行基础的布局，包含 header，组件列表区域，画布组件编辑区域，组件属性编辑区域。
我们每天都和npm打交道，但是不少人对npm的掌握程度还停留在一个比较浅的层面（当然这也包括我）。就比如说一个用 vite 创建 app 的命令npm init @vitejs/app，很多人就懵了，“npm init不是用来创建package.json文件的吗？”
本地是 main.tsx 引入了 App.tsx，并且还有 react 和 react-dom/client 的依赖：
DCE 作用于模块内（webpack 的 DCE 通过 UglifyJS 完成），而 Tree-shaking 则是在打包的时候通过模块之间的信息打包必须的代码。
两年前，我写了一篇有关module/nomodule技术的文章（译者注：原文地址https://philipwalton.com/articles/deploying-es2015-code-in-production-today/，文末有此文的译文链接），这项技术允许你在编写ES2015+代码时，使用打包器和转换器生成两个版本的代码库，一个具有现代语法的版本（通过 <scripttype="module">加载）和一个使用ES5语法的版本（通过 <scriptnomodule>加载）。该技术允许你向支持模块（译者注：指ECMA制定的标准的export/import模块语法及其加载机制，又称为ES Module、ESM、ES6 Module、ES2015 Module，下文中将出现很多"模块"一词，都是这个含义）的浏览器发送更少的代码，现在大多数Web框架和CLI都支持它。
---- 更新属性的过程 点击某一个组件，选中组件 将它的属性以不同类型的表单呈现在右侧区域 编辑表单中的值，在值更新的同时，将数据更新到界面 获取正在编辑的元素的属性 组件外套一层 wrapper 用来隔离点击事件和组件自身行为 鼠标经过组件添加边框样式 点击某一个组件，选中组件，选中的组件添加高亮样式 点击某一个组件，向父组件 Editor.vue 发射 setActive 事件 Editor.vue 通过 commit 更新 store 中的状态 store 中接收组件 id，计算当前组件的属性 E
当UI库弹窗无法满足自定义需求时，需要我们自己开发简单的弹窗组件。弹窗组件与普通业务组件开发没有太大区别，重点在多弹窗之间的关系控制。例如： 弹窗1，弹窗2 由于触发时机不同，需要不同的层叠关系，后触发的始终在最前端，点击弹窗头改变层叠关系。 单一弹窗多处调用等。这里封装基础的管理钩子，简化这些问题的处理。
大家都知道， Vite 是一个提倡 no-bundle 的构建工具，相比于传统的 Webpack，能做到开发时的模块按需编译，而不用先打包完再加载。这一点我们在快速上手这一节已经具体地分析过了。
年初突然有了个想法，前端也做了几年了，但是很多知识还很零散，应该系统的把知识归纳起来，于是给自己制定了一个计划，决定花大半年的时间整理一下大前端的知识，把他们都写成文章。这个计划包括页面布局，JavaScript，计算机网络，Vue.js，React.js，Node.js，设计模式，架构，工程化，数据结构和算法，实战项目。 所谓学习的三个阶段：学一遍，做一遍，讲一遍。这个计划就是讲一遍，同时在讲的过程中，对自己的知识进行查漏补缺。 本计划所有文章都托管在GitHub上：github.com/dennis-jian… 下面是已经写作完成的文章列表，标题前加了推荐！！的都是点赞还不错的文章。
Underscore.js是很有名的一个工具库，我也经常用他来处理对象，数组等，本文会深入解析Underscore源码架构，跟大家一起学习下他源码的亮点，然后模仿他写一个简单的架子来加深理解。他的源码通读下来，我觉得他的亮点主要有如下几点：
---- 属性更新 属性编辑通过 store 获取属性值 通过发射事件触发 commit 修改属性值 支持属性值的转换 📷 propsMap.ts import type { TextComponen
其中，dist 目录一般是通过 Rollup 等打包器打包后的入口文件，一般具有多种格式，以不同后缀命令，如: index.cjs.js index.esm.js。lib 和 esm 目录可以是 TypeScript 编译后生成的文件，目录下的结构基本和原项目结构相同，只是后缀变为 js，lib 一般为 CommonJS 格式，esm 为 ESModule 格式。而这些是一个库最基本的需要发布的文件。
企业运营后台页面很多，路由如若不区分模块化配置，所有路由挤在同一个文件将不好维护，所以路由的配置也要模块化
我持续组织了近一年的源码共读活动，感兴趣的可以 点此扫码加我微信 ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信进群。
在传统的单 chunk 打包模式下，当项目代码越来越庞大，最后会导致浏览器下载一个巨大的文件，从页面加载性能的角度来说，主要会导致两个问题:
当我们首次运行 Vite 的时候，Vite 会执行依赖预构建，目的是为了兼容 CommonJS 和 UMD，以及提升性能。
当收集浏览器端每个用户核心性能指标时，可通过 web-vitals 收集并通过 sendBeacon 上报到打点系统。
hello, 大家好, 我是徐小夕, 之前和大家分享了很多可视化低代码以及前端工程化的技术实践和思考, 今天继续和大家分享一位技术小伙伴开源的非常有意思的脚手架—— yite-cli.
为了支持数以百万计的功能，用例和需求，它需要一个安全，稳定，可靠和可拓展的基础。只有 webpack 具有无限的可能性。 稳定的发布之路！ 自八月初以来 —— 当我们从 **webpack/webpa
Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未曾其它模块使用，并将其删除，以此实现打包产物的优化。
作者：magentaqin，腾讯 CSIG 前端开发工程师 说到 Code Review，经常有同学会问，究竟从哪些方面下手？除了一些抽象的 Review 原则，有没有更细化的实施准则来指导实践？ PCG 代码委员会曾推出过通道晋级代码检查报告。笔者打算在这些报告基础上，从代码格式、代码错误、代码习惯、代码优化四个角度，并结合腾讯医典前端 Code Review 过程中遇到的一些 bad case，逐一列出更细化的实施准则。希望对各位有一定的参考价值。 1. 代码格式 代码格式问题完全可以通过自动
前言 对于前端来说，最重要的是体验，而在前端体验中，最为核心的就是性能。 相信大多数用户接入前端性能监控（RUM）都是为了通过RUM质量评价体系来验证前端性能和质量如何，而直接影响性能和质量的则是一系列的指标，因此了解页面性能指标显得格外重要！ 前端性能监控RUM是腾讯云的大前端领域页面质量和性能监控平台，聚焦提升用户体验。了解详情 通俗点说，某用户想了解页面访问速度快，是否快，究竟有多快？怎么衡量？需要一个中立的裁判来裁决，而RUM的角色正是这个裁判。 本文会结合前端监控SDK源码-Aegis
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法 非常适用于：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
