- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端儿
Webpack编译结果浅析
中的事件使用 Tapable 来管理，在这一阶段，除了绑定webpack内置的一大堆事件之外，还支持自定义的一些事件处理。 期间会使用AST抽象语法树来分析语法，直到编译完成，输出到相应的文件中 可以来看看这篇文章 Webpack运行机制 二、Webpack编译结果 由最简单的例子开始 2.1 无依赖的单个模块 . /number.js let n = 10; exports.n = n; 编译后，生成的文件变化的只是匿名函数传入的部分 ? . /number.js let n = 10; export { n }; 编译后 . /str.js export var str = 10; 编译后 ? .
1.5K31发布于 2018-10-11 webpack之编译原理
webpack 的作用是根据入口文件将源代码编译（构建、打包）成最终代码。 中间经过webpack打包，打包的过程就是编译 整个过程大致分为三个步骤：初始化、编译（最重要）、输出 「初始化」 在初始化这个阶段webpack会将CLI参数、配置文件、默认配置进行融合，形成一个最终的配置对象 初始化阶段相对比较简单，主要是为接下来的编译阶段做必要的准备。目前，可以简单的理解为：初始化阶段主要用于产生一个最终的配置。 以上就是webpack编译过程，做这一切最终的目的就是形成一个模块记录表。 下面有个简图，经过上述编译过程之后会在chunk中通过入口文件加载形成多个模块，每个模块记录了转换之后的代码。 「总过程」 当敲下webpack打包命令之后，文件开始初始化，各个参数进行融合，形成一个最终的配置对象，然后把配置对象交给编译器进行编译， 通过入口模块找到互相依赖模块形成模块列表，接下来webpack
2.4K10编辑于 2023-12-29- 来自专栏知识同步
编译阶段完成的任务
面试常问 源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) → 汇编程序 (assembler) → 目标代码 (object code 中间代码优化 优化是编译器的一个重要组成部分，由于编译器将源程序翻译成中间代码的工作是机械的、按固定模式进行的，因此，生成的中间代码往往在时间和空间上有很大浪费。 目标代码生成 目标代码生成是编译器的最后一个阶段。在生成目标代码时要考虑以下几个问题：计算机的系统结构、指令系统、寄存器的分配以及内存的组织等。 编译器生成的目标程序代码可以有多种形式：汇编语言、可重定位二进制代码、内存形式。 符号表管理 符号表的作用是记录源程序中符号的必要信息，并加以合理组织，从而在编译器的各个阶段能对它们进行快速、准确的查找和操作。符号表中的某些内容甚至要保留到程序的运行阶段。
60210编辑于 2022-12-26 - 来自专栏前端大白专栏
webpack编译打包出现的问题!
最近使用webpack打包编译文件的时候,遇到个奇怪的问题,找不到源头,具体报错如下: ? 点进去后: ? 为这样的! call() is not a function; 也试过把commont.js加入到其它文件,确实这个页面也报错了,但是这并不是问题的根源,于是继续找: 后来经过排查:是两个common.js的冲突,从webpack
1.3K20发布于 2019-03-12 - 来自专栏Tecvan
Webpack 性能系列三：提升编译性能
前面两篇文章《Webpack 性能系列二：多进程打包》、《Webpack 性能系列一: 使用 Cache 提升构建性能》已经详细探讨使用缓存与多进程能力，提升 Webpack 编译性能的基本方法与实现原理 除此之外，还可以通过一些普适的最佳实践，减少编译范围、编译步骤提升 Webpack 性能，包括： 使用最新版本 Webpack、Node 配置 resolve 控制资源搜索范围 针对 npm 包设置 module.noParse 不过，类型检查涉及 AST 解析、遍历以及其它非常消耗 CPU 的操作，会给工程化流程引入性能负担，必要时开发者可选择关闭编译主进程中的类型检查功能，同步用 fork-ts-checker-webpack-plugin eval ，确保最佳编译速度 生产环境使用 source-map，获取最高质量 参考：https://webpack.js.org/configuration/devtool/ 八、总结 至此，结合前两篇文章 《Webpack 性能系列二：多进程打包》、《Webpack 性能系列一: 使用 Cache 提升构建性能》，关于 Webpack 编译性能提升的方式方法已经总结的比较完备了，有其它观点的同学欢迎留言或私信联系
1.7K20编辑于 2021-12-09 - 来自专栏web秀
webpack 打包编译有些CSS样式莫名消失？
相信很多小伙伴已经遇到过了，在使用webpack构建项目（npm run build），部署项目后，会发现有些CSS样式丢失了，比如： .content{ overflow: hidden; 编译后的代码 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ } 可能是人品问题，于是再次寻找新的解决方法 修改webpack.prod.conf.js optimize-css-assets-webpack-plugin这个插件的问题, 注释掉webpack.prod.conf.js中下面的代码 // new OptimizeCSSPlugin({
3.2K20发布于 2019-09-04 - 来自专栏Rust语言学习交流
【Rust日报】 2019-10-10 Async 进入完善阶段
这是值得我们关注的事情，详情请看原文：https://blog.rust-lang.org/inside-rust/2019/10/07/AsyncAwait-WG-Focus-Issues.html WebAssembly.sh 目前可以提供如下功能： WebAssembly.sh 是一种沙箱化的方法，可以快速测试或尝试编译到 WASI 的程序，而无需在本地机器上安装二进制文件。
64720发布于 2019-10-14 - 来自专栏react源码分析
react源码解析10.commit阶段
在render阶段的末尾会调用commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，然后会遍历render阶段生成的effectList，effectList commitRootImpl.bind(null, root, renderPriorityLevel)); return null;}在commitRootImpl的函数中主要分三个部分：commit阶段前置工作调用 firstEffect = finishedWork; } } else { firstEffect = finishedWork.firstEffect; }mutation阶段 (这个后面会讲到)，而useEffect会在commit阶段异步调度，所以适用于数据请求等副作用的处理 > 注意，和在render阶段的fiber node会打上Placement等标签一样，useEffect ，useEffect会在commit阶段异步调度function commitLifeCycles( finishedRoot: FiberRoot, current: Fiber
24610编辑于 2022-11-14 - 来自专栏用户8771298的专栏
react源码解析10.commit阶段
react源码解析10.commit阶段 视频讲解（高效学习）：进入学习 往期文章： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14. 手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件系统 19.手写迷你版react 20.总结&第一章的面试题解答 在render阶段的末尾会调用 commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，然后会遍历render阶段生成的effectList，effectList上的Fiber节点保存着对应的 (这个后面会讲到)，而useEffect会在commit阶段异步调度，所以适用于数据请求等副作用的处理 注意，和在render阶段的fiber node会打上Placement等标签一样，useEffect
33030编辑于 2021-12-02 - 来自专栏react源码分析
react源码解析10.commit阶段
在render阶段的末尾会调用commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，然后会遍历render阶段生成的effectList，effectList commitRootImpl.bind(null, root, renderPriorityLevel)); return null;}在commitRootImpl的函数中主要分三个部分：commit阶段前置工作调用 firstEffect = finishedWork; } } else { firstEffect = finishedWork.firstEffect; }mutation阶段 (这个后面会讲到)，而useEffect会在commit阶段异步调度，所以适用于数据请求等副作用的处理 > 注意，和在render阶段的fiber node会打上Placement等标签一样，useEffect ，useEffect会在commit阶段异步调度function commitLifeCycles( finishedRoot: FiberRoot, current: Fiber
55630编辑于 2023-01-02 - 来自专栏AI系统
【AI系统】AI 编译器历史阶段
如下图所示，AI 编译器的发展应该分为三个阶段：朴素 AI 编译器（阶段一）、专用 AI 编译器（阶段二）、通用 AI 编译器（阶段三），接下来我们将会主要按照这三个阶段的顺序详细介绍 AI 编译器的发展阶段 AI 编译器的发展需要同时满足这两个场景的需求，以支持 AI 模型从开发到部署的整个生命周期。朴素 AI 编译器AI 编译器的第一个阶段，我们可以将其看作是朴素 AI 编译器阶段。 专用 AI 编译器在 AI 编译器的发展中，阶段二标志着专用 AI 编译器的诞生，这一阶段的编译器开始针对 AI 和深度学习工作负载进行优化。 通用 AI 编译器在阶段二专用 AI 编译器之后，就是 AI 编译器发展阶段三的到来。阶段三代表着通用 AI 编译器的重要发展阶段。 阶段三的通用 AI 编译器代表了 AI 编译器技术的进一步成熟和进步。目前工业界的发展还处于 AI 编译器发展阶段的阶段二，也就是专用 AI 编译器的发展阶段。
51210编辑于 2024-11-28 - 来自专栏前端技术江湖
真香 - Webpack5 新特性之增量编译
webpack5正式发布于2020年10月10号，距离上一个大版本Webpack4更新已经是2年前年了，每个大版本的升级都会有相当多的改变和提升，今天咱们就来看看增量编辑和长期缓存。 ---- 每当有文件内容更新的时候,会重新递归生成依赖图，如果简单粗暴地重建依赖图再编译，会有很大的性能开销。在webpack5中，利用缓存实现增量编译，从而提升构建性能。 每当代码变化、模块之间依赖关系改变导致依赖图改变时， Webpack 会读取记录做增量编译。 ：v4 done in 1.5s 左右 但v5里多了一个时间 webpack compiled successfully time，这个在v4里默认没有显示 V5 首次编译 webpack compiled successfully in 723 ms V5 无修改编译 webpack compiled successfully in 100 ms V5 修改后编译 webpack compiled
2.7K10发布于 2021-02-05 - 来自专栏高级前端工程师必备
react源码解析10.commit阶段
react源码解析10.commit阶段 视频讲解（高效学习）：进入学习 往期文章： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14. 手写hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件系统 19.手写迷你版react 20.总结&第一章的面试题解答 在render阶段的末尾会调用 commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，然后会遍历render阶段生成的effectList，effectList上的Fiber节点保存着对应的 (这个后面会讲到)，而useEffect会在commit阶段异步调度，所以适用于数据请求等副作用的处理 注意，和在render阶段的fiber node会打上Placement等标签一样，useEffect
36430编辑于 2021-12-07 - 来自专栏高级前端工程师学习必备
react源码解析10.commit阶段
react源码解析10.commit阶段 视频课程（高效学习）：进入课程 课程目录： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14. hooks 15.scheduler&Lane 16.concurrent模式 17.context 18事件系统 19.手写迷你版react 20.总结&第一章的面试题解答 21.demo 在render阶段的末尾会调用 commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，然后会遍历render阶段生成的effectList，effectList上的Fiber节点保存着对应的 (这个后面会讲到)，而useEffect会在commit阶段异步调度，所以适用于数据请求等副作用的处理 注意，和在render阶段的fiber node会打上Placement等标签一样，useEffect
54700发布于 2021-06-10 - 来自专栏全栈程序员必看
webpack（10）webpack-dev-server搭建本地服务器「建议收藏」
前言 当我们使用webpack打包时，发现每次更新了一点代码，都需要重新打包，这样很麻烦，我们希望本地能搭建一个服务器，然后写入新的代码能够自动检测出来，这时候就需要用到webpack-dev-server find module 'webpack-cli/bin/config-yargs' 原因是webpack-cli的版本问题，我们先来看以下我们的版本 "webpack": "^5.44.0", "webpack-cli ": "^4.7.2", "webpack-dev-server": "^3.11.2" 解决方案1 降低webpack-cli的版本，从4降到3 1.卸载webpack-cli npm uninstall webpack-cli 2.安装webpack-cli@3 npm install webpack-cli@3 -D 然后启动就不会报错了，但是这只是临时的解决方案，我们推荐第二种解决方式 解决方案 2 更改scripts中的配置，将原来的webpack-dev-serve改为webpack serve即可 "scripts": { "dev": "webpack serve --open
86310编辑于 2022-09-19 - 来自专栏悟空被FFmpeg玩
Fedora Core 10编译Android
Fedora Core 10下面用的JDK是OpenJDK,编译的时候出了个错误 Error occurred during initialization of VM Could
46740发布于 2019-03-05 - 来自专栏Super 前端
10 分钟了解 webpack 核心内容
10 分钟了解 webpack 核心内容 直接上手稿了 Tapable 是 webpack 核心工具之一，提供了插件接口。 webpack 中许多对象扩展自 Tapable 类（如，负责编译的 Compiler 和负责创建 bundles 的 Compilation）。 这个类暴露 tap, tapAsync 和 tapPromise 方法，可以使用这些方法，注入自定义的构建步骤，这些步骤将在整个编译过程中不同时机触发。 基于 Tapable 使得 webpack 具有很好的扩展性，但对于调试来说比较痛苦（代码跳跃）。 /webpack/blob/master/lib/Compiler.js
55030发布于 2021-08-30 - 来自专栏前端修炼之路
【第10期】webpack入门学习手记（四）
通过webpack插件可以很自动化的完成上面的需求。 添加html-webpack-plugin和clean-webpack-plugin这两个插件。 首先安装这两个插件 npm install --save-dev html-webpack-plugin clean-webpack-plugin 然后修改配置文件，引用这两个插件。 webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin html-webpack-plugin接受的title属性，就是生成的html页面中title。clean-webpack-plugin接受的参数，就是要清理的目录名称。 下一篇笔记整理webpack官方文档的指南手册剩余部分，敬请关注。 （待续）
57910发布于 2020-03-24 - 来自专栏coding for love
5-10~11 webpack 性能优化（2）
DLLReferencePlugin 是在 webpack 主配置文件中设置的， 这个插件把只有 dll 的 bundle(s)(即：dll-only-bundle(s)) 引用到需要的预编译的依赖。 利用 autodll-webpack-plugin 简化配置 上面我们可以看到，引入 dll 需要非常多的配置，一旦 node_modules 发生变化还需要我们去手动重新编译模块。 缓存：当用户第一次构建 bundle 时，AutoDllPlugin 会为您编译 DLL，并将所有指定的模块从 bundle 引用到 DLL。 下一次编译代码时，AutoDllPlugin 将跳过构建并从缓存中读取。 支撑大规模应用开发最佳实践 webpack.DllPlugin和webpack.DllReferencePlugin静态资源预编译插件 辛辛苦苦学会的 webpack dll 配置，可能已经过时了
1.5K10发布于 2020-05-26 - 来自专栏Super 前端
10 分钟了解 webpack 核心内容
10 分钟了解 webpack 核心内容 直接上手稿了 tapable_flow.jpeg Tapable 是 webpack 核心工具之一，提供了插件接口。 webpack 中许多对象扩展自 Tapable 类（如，负责编译的 Compiler 和负责创建 bundles 的 Compilation）。 这个类暴露 tap, tapAsync 和 tapPromise 方法，可以使用这些方法，注入自定义的构建步骤，这些步骤将在整个编译过程中不同时机触发。 基于 Tapable 使得 webpack 具有很好的扩展性，但对于调试来说比较痛苦（代码跳跃）。 /webpack/blob/master/lib/Compiler.js
59311发布于 2020-07-11
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号