- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端儿
Webpack编译结果浅析
代码比较长，生成的代码也比较晦涩比较绕，也可能条理不顺，客官坐好咧~ Webpack的运行机制 Webpack的编译结果分析 无依赖的单个模块 有依赖的单个模块 多个入口模块 异步加载模块 提取公共模块 中的事件使用 Tapable 来管理，在这一阶段，除了绑定webpack内置的一大堆事件之外，还支持自定义的一些事件处理。 分析完入口模块，接下来分析该模块的依赖，并使用相关loader进行编译（如果需要loader的话），真正的编译环节是在这里。 期间会使用AST抽象语法树来分析语法，直到编译完成，输出到相应的文件中 可以来看看这篇文章 Webpack运行机制 二、Webpack编译结果 由最简单的例子开始 2.1 无依赖的单个模块 . 此处初始阶段是没有值的，所以可以直接略过 要看明白webpackJsonpCallback这个函数，得从调用它的地方开始，在216行中开始调用 setTimeout(() => { __webpack_require
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 - 来自专栏coding for love
5-8~9 webpack 性能优化（1）
简介 接下来几节，我们一起学习如何优化 webpack 性能，提升打包速度。 1. 跟上技术的迭代，使用最新的依赖 首先，webpack 版本在迭代更新的过程中会做很多的优化。 同样的道理， webpack 打包依赖的 node ，npm ，yarn，也应尽可能使用新版本。 2. 3. plugin 尽可能精简并确保可靠 不需要使用的 plugin 应该精简，比如 dev 环境下我们并不需要去压缩代码，那么诸如：uglifyjs-webpack-plugin，terser-webpack-plugin ，optimize-css-assets-webpack-plugin 等。 另外，因为 webpack 的插件非常多，选用的时候尽可能选择官方推荐或者已经比较成熟经过验证的插件。 4. resolve 参数合理配置 resolve 用来设置模块如何被解析。
44810发布于 2020-05-18 - 来自专栏前端修炼之路
【第9期】webpack入门学习手记（三）
webpack有两大特色： 动态打包。在webpack中，每个模块都会声明所引用的依赖，这样就避免了打包没有使用到的模块。另外通过配置，可以避免重复打包相同的引用，提高打包效率。 强大的loader。 用浏览器检查一下页面，就会知道webpack是怎么做到的了。 说明webpack将css代码自动添加到head标签中了，非常的智能化~ 加载图片 接下来尝试下加载图片和在css中引用背景图片。 首先告诉webpack字体文件使用file-loader进行加载。 加载数据 webpack可以加载任何类型的数据，例如JSON, CSV, TSV, 和XML。webpack默认内置了JSON加载数据。 照着官网的例子一步步来。 需要将webpack4版本 降到webpack3版本。我找到的版本是3.11.0。我将wepack卸载掉，然后安装这个版本之后，再次打包，就成功了。
1.3K20发布于 2020-03-24 - 来自专栏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 - 来自专栏vue学习
9、webpack从0到1-devServer初探
git仓库：webpack-demo 1、问题 每次修改完文件内容要编译代码时，需要重复手动运行npm run build就是件很麻烦的事情。 webpack中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码，我这里主要说下第一、二种，相关内容webpack教程里都有。 webpack's Watch Mode webpack-dev-server webpack-dev-middleware 2、Watch模式 watch模式其实很简单，就是在package.json 3、安装配置 首先我们进入chapter9，安装这个插件： $ cd chapter9 $ npm install webpack-dev-server --save-dev 接下来我们需要配置它，进入 /chapter9/dist/index.html； 现在我们使用它会帮我们自动打开浏览器且地址为http://localhost:8080/，它为我们起了一个新的服务器。
82230发布于 2020-03-20 - 来自专栏大史住在大前端
webpack4.0各个击破（9）—— karma篇
一. webpack与自动化测试 webpack对应的关键词是模块化，它的主要任务就是打包和管理模块，所以首先需要明确的概念就是webpack之所以关联自动化测试，是因为它能够为测试脚本提供模块管理的能力 ，本质上来讲，是将webpack的打包功能嵌入了自动化测试框架，而不是将自动化测试框架作为插件集成进了webpack，理解这个区别是非常关键的。 二. karma-webpack 插件地址：https://github.com/webpack-contrib/karma-webpack 2.1 自动化单元测试库简介 先对基本的单元测试工具做一个简要说明 处理 'test/*_test.js': [ 'webpack' ], 'test/**/*_test.js': [ 'webpack' ] }, webpack 低版本的webpack可以参考karma-webpack-example这个开源项目的示例进行配置。webpack4.0以上版本可以参考下文推荐的示例。 单元测试结果： ? 覆盖率报告： ? 四.
1.5K20发布于 2018-09-10 - 来自专栏Java编程指南
大型Web网站架构演变之9大阶段
阶段三、应用服务器集群 随着访问量继续增加，单台应用服务器已经无法满足需求了。 9)、LBLC基于局部性最少连接算法 负载均衡器根据请求的目的IP地址，找出该IP地址最近被使用的服务器，把请求转发之。若该服务器超载，最采用最少连接数算法。 阶段六、用缓存缓解读库的压力 常用的缓存机制包括页面级缓存、应用数据缓存和数据库缓存。 阶段七、数据库水平拆分与垂直拆分 我们的网站演进到现在，交易、商品、用户的数据都还在同一个数据库中。 阶段九、引入消息中间件 随着网站的继续发展，的系统中可能出现不同语言开发的子模块和部署在不同平台的子系统。
77220发布于 2019-08-05 - 来自专栏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中，利用缓存实现增量编译，从而提升构建性能。 每当代码变化、模块之间依赖关系改变导致依赖图改变时， Webpack 会读取记录做增量编译。 --config webpack.config.js" }, 构建结果对比 //执行 yarn start 首次编译 v5 done in 1.5s 左右 首次编译 v4 done in ：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 - 来自专栏Zephery
Tomcat9源码——编译环境搭建
Readme Tomcat 9 源码要求： 1.jdk1.8+ 步骤 1.直接下载源码
2.解压后打开文件夹，新建pom.xml，输入下面的东西 <modelVersion>4.0.0</modelVersion> <groupId>org.apache.tomcat</groupId> <artifactId>tomcat9< /artifactId> <name>tomcat9</name> <version>9.0</version> <build> <finalName>tomcat9 </dependency> </dependencies> </project>3.运行 mvn clean install即可编译2.3K110发布于 2018-03-12 - 来自专栏痴者工良
C#多线程(9)：多阶段并行线程
目录 前言 Barrier 类 属性和方法 示例 新的示例 说明 前言 这一篇，我们将学习用于实现并行任务、使得多个线程有序同步完成多个阶段的任务。 应用场景主要是控制 N 个线程(可随时增加或减少执行的线程)，使得多线程在能够在 M 个阶段中保持同步。 线程工作情况如下： ? Barrier 类 使多个任务能够采用并行方式依据某种算法在多个阶段中协同工作，使多个线程（称为“参与者” ）分阶段同时处理算法。 可以使多个线程（称为“参与者” ）分阶段同时处理算法。 （注意算法这个词） 每个参与者完成阶段任务后后将被阻止继续执行，直至所有参与者都已达到同一阶段。 示例如下： new Barrier(int,Action) 设置有多少线程参与，Action 委托设置每个阶段完成后执行哪些动作。
74860发布于 2021-04-26 - 来自专栏安全乐观主义
供应链安全系列-攻击编译阶段（一）
对编译阶段的检查？如何确保编译指令的安全性？攻击者如果是针对编译时，而不是编译后进行突破？引申出来的实际问题是如何保证CI|CD系统的内部安全性。 介绍 这里主要探讨编译阶段，使用cve、弱口令口令直接攻击jenkins、GitLab CI、Spinnaker等不再讨论范围之内。 编译阶段的需要关注的事情首推JDWP漏洞，在 JPDA 体系中，作为前端（front-end）的调试者（debugger）进程和后端（back-end）的被调试程序（debuggee）进程之间的交互数据的格式就是由 以演示项目https://github.com/nanolikeyou/attackjavac为例， 我们在samples项目指定一个注解，希望在编译阶段，由processor module下的程序进行处理 编译阶段反弹shell，用户是travis。 ? 阿里云CodePipeline，jenkins用户不能反弹shell。 ? 华为云cloudbuild，root不支持反弹shell。 ?
1.5K20发布于 2019-11-20 - 来自专栏开源部署
Debian 9 下编译安装PHP及配置
# apt update 1.2 必须软件包 下面都是编译php必须的，提前安装好。 apt install gcc make # apt install libxml2 libxml2-dev //xml库 1.2 创建需要使用的目录 创建目录source和web，分别用来放源码和编译后的文件 -8之外编码的语言 --with-mysqli //打开mysqli模块 --with-pdo-mysql //pdo_mysql模块 三、安装php扩展（可选） 上面的方法是将所以扩展都编译在一起 这里是单独编译出来，然后通过php.ini文件，自由度更高。 /source/php-7.1.10/ext 你会看到很多的文件夹。需要什么扩展就进入哪个文件夹，运行如下命令。 with-php-config=/web/php/bin/php-config # make && make install 安装必须 # apt install autoconf //php扩展编译需要
1.5K30编辑于 2022-07-20 - 来自专栏盛开在夏天的太阳
9.Vue之webpack打包基础---模块化思维
现实工作中, 一个项目可能会有多个人同时开发. 然后, 将所有人开发的内容, 合并到一个文件中. 比如: 1. 有3三个人同时开发, 一个人一个js文件, 最后引入到main.js 2. 每个人单独写, 这样, 定义的变量可能会重名, 那么在main.js中取值赋值就可能会出现问题
57910发布于 2021-03-05 - 来自专栏前端一会
webpack4：csssass编译优化分离，处理引用资源
本篇实现功能：css转换，sass编译转换，css代码优化压缩合并和提取，css图片资源定位路径的转换，处理浏览器css兼容，css中对静态资源(如图片)的引用打包，引用优化(base64)。 是对css的扩展，编译后转换成正常的css且会自动加上前缀，配合 autoprefixer 使用。 sass-loader：加载器，使webpack可以识别sass/scss文件，默认使用node-sass进行编译， mini-css-extract-plugin：插件，webpack4启用的插件，可以将处理后的 根据 webpack 规则：放在最后的 loader 首先被执行。所以，首先应该利用sass-loader将 scss 编译为 css，剩下的配置和处理 css 文件相同。 sass，webpack默认使用node-sass进行编译，所以需要同时安装 sass-loader 和 node-sass options: {
3.3K20发布于 2019-08-29 - 来自专栏有困难要上，没有困难创造困难也要上！
Electron 使用 Webpack2 预编译 Electron 和 Browser targets
前一篇文章说了说怎样使用 Webpack2 预编译 Electron 应用，但是有时候我们希望使用 Webpack2 的热部署功能来提高我们的开发效率，使我们在代码修改后能自动立即看到修改后的结果。 $ npm install --save-dev webpack-dev-server $ npm install --save-dev webpack-target-electron-renderer ", "web": "webpack --target web && webpack-dev-server --target web --hot --inline", "packager ": "webpack && electron-packager . 预编译好的 bundle.js 文件。
1.3K70发布于 2018-05-14
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号