为什么我们要在使用babel-loader时排除node_modules？

在使用babel-loader时排除node_modules的原因是为了提高构建速度和避免不必要的转译。

Babel是一个用于将新版本的JavaScript代码转换为向后兼容的旧版本的工具。在前端开发中，我们通常使用Babel来将ES6+的代码转换为ES5的代码，以确保在不同浏览器中的兼容性。

然而，node_modules目录通常包含了第三方库和依赖，这些库已经经过了编译和转译，不需要再次进行转译。因此，将babel-loader排除在node_modules之外可以避免对第三方库进行不必要的转译，从而提高构建速度。

另外，排除node_modules还可以避免一些潜在的问题。有些第三方库可能使用了一些特殊的语法或功能，这些语法或功能可能无法被Babel正确转译，导致构建错误或运行时错误。通过排除node_modules，我们可以避免这些潜在的问题。

总结起来，排除node_modules可以提高构建速度，避免不必要的转译，并减少潜在的问题。在使用babel-loader时，我们应该将node_modules目录排除在转译范围之外，以获得更好的开发体验和性能。

腾讯云相关产品和产品介绍链接地址：

腾讯云：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云函数（SCF）：https://cloud.tencent.com/product/scf
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
移动推送服务（TPNS）：https://cloud.tencent.com/product/tpns
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
腾讯元宇宙（Tencent Metaverse）：https://cloud.tencent.com/solution/metaverse

相关·内容

webpack5高级

/, loader: "babel-loader", }, ], }, ], Include和Exclude 为什么 开发时我们需要使用第三方库和插件...所以我们在对js文件进行处理时，要排除node_modules中的文件。...: /node_modules/, //排除node_modules，其他都处理 // include:path.resolve(__dirname,"....缓存 cacheCompression:false,//关闭缓存文件压缩 } }, 测试：打包完成后在node_modules中增加了cache的文件 Thead多进程 为什么 当项目越来越庞大时...我们需要在浏览器的空闲时间加载后续的资源，需要用到preload和prefetch。

2664 0

webpack 4.x 初级学习记录

，但是这种方式在4版本中就不能使用了，4版本有自己的新的方式 webpack 4.x 默认打包编译 为什么上面要写默认打包编译，是因为webpack可以自定义打包编译配置，我们首先说下默认的打包编译。...webpack 的核心概念：入口（entry）输出（output） loader 插件（plugins）我们需要在根目录下创建一个 webpack.config.js 的文件，使用 Commonjs...在 webpack 配置中使用插件是简单直接的，然而也有很多值得我们进一步探讨的用例。...:['env','react'] } }, // 排除node_modules 文件 exclude:/node_modules/...:['"@babel/preset-env','"@babel/preset-react'] } }, // 排除node_modules 文件

6893 0

webpack实战——打包优化【上】

HappyPack “HappyPack是一个通过多线程来提升webpack打包速度的工具 1.1 工作原理在打工过程中，非常耗时的一个工作是使用loader将各种资源进行转译处理，例如常见的使用babel-loader...对于JS来说，一般需要把node_modules目录排除掉，另外当exclude和include规则有重叠部分时，exclude优先级更高。...那对于此处，我们使用include让babel-loader只生效于源码目录： // webpack.config.js ... module: { rules: [ test:...一般作用于排除一些库相关文件。一个由库产生的额外资源我们用不到但没办法去掉时，可以考虑使用此方法处理。...例，一个日期时间处理的相关插件Moment.js，为了做本地化会加载许多语言包，但一般我们只会用到本地的语言包而不会使用其他地区的语言包，而语言包会占用很大体积，这时可以使用IgnorePlugin来做处理

9613 0

Webpack构建速度优化指南

目录缩小范围noParseIgnorePlugin优化 resolve 配置externals缓存缩小范围在配置 loader 的时候，我们需要更精确的去指定 loader 的作用目录或者需要排除的目录...，通过使用 include 和 exclude 两个配置项，可以实现这个功能，常见的例如：include：符合条件的模块进行解析exclude：排除符合条件的模块，不解析，优先级更高这样一来，一开始构建...，我们就能去除一些选项，比如，在使用babel-loader的时候{ test: /\.jsx?...externalsexternals 配置选项提供了「从输出的 bundle 中排除依赖」的方法，因为我们在每次打包的时候，有些依赖的变动很小，所以我们可以不选择不把依赖打包进去，而使用script标签的形式来加载他...开启缓存abel 在转译 js 过程中时间开销比价大，将 babel-loader 的执行结果缓存起来，重新打包的时候，直接读取缓存缓存位置： node_modules/.cache/babel-loader

1.5K2 0

Webpack 打包优化之速度篇

于此，我们需要做的即：减小文件搜索范围，从而提升速度；实现这一点，可以有如下两法：配置 resolve.modules Webpack的resolve.modules配置模块库（即 node_modules...）所在的位置，在 js 里出现 import 'vue' 这样不是相对、也不是绝对路径的写法时，会去 node_modules 目录下找。...如果配置 Webpack 来排除 node_modules，那么它将从 dist 已经编译的目录中获取文件。否则会再次编译它们。...babel-loader 提供了 cacheDirectory特定选项（默认 false）：设置时，给定的目录将用于缓存加载器的结果。...cacheDirectory=true），node_modules/.cache/babel-loader 则 node_modules 在任何根目录中找不到任何文件夹时，加载程序将使用默认缓存目录或回退到默认的

1.6K2 0

Webpack构建速度优化

1.6K1 0

webpack 学习笔记系列06-打包优化

minSize: 30000, // 文件最小尺寸，默认30K，development 下10k，与 chunk 数量成反比 minChunks: 1, // 默认 1，被提取的模块至少要在几个...尤其是 jQuery 等未采用模块化标准且体积庞大的库，但要注意，排除的文件不能包含 import、require、define 等模块化语句。.../node_modules')], // 排除绝对路径 Array include: [path.resolve(__dirname, '....2.4 cache 缓存 babel-loader 往往是编译过程中最耗时的环节，虽然提供了 cacheDirectory 配置指定缓存目录，但默认为 false 关闭，设为 true 则使用默认的缓存目录...node_modules/.cache/babel-loader rules: [{ test: /\.js$/, loader: 'babel-loader', options

1.8K20 1

入门webpack的最佳实践（基于webpack4.X 5.X）--打包速度优化

，通过使用 include 和 exclude 两个配置项，可以实现这个功能，常见的例如： **include**：符合条件的模块进行解析 **exclude**：排除符合条件的模块，不解析，优先级更高...这样一来，一开始构建，我们就能去除一些选项，比如，在使用babel-loader的时候 { test: /\.jsx?...import、require 等语法 module：{ noParse：/jquery|lodash/ } IgnorePlugin 有很多的第三方包内部会做国际化处理，包含很多的语言包，而这些语言包对我们来说时没有多大用处的...externals externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法，因为我们在每次打包的时候，有些依赖的变动很小，所以我们可以不选择不把依赖打包进去，而使用script...开启缓存 abel 在转译 js 过程中时间开销比价大，将 babel-loader 的执行结果缓存起来，重新打包的时候，直接读取缓存缓存位置： node_modules/.cache/babel-loader

9743 0

【Webpack】538- 打包速度提升指南

id=happy-babel"], // 排除 node_modules 目录下的文件 // node_modules 目录下的文件都是采用的 ES5 语法，没必要再通过...1. cache-loader cache-loader 和 thread-loader 一样，使用起来也很简单，仅仅需要在一些性能开销较大的 loader 之前添加此 loader，以将结果缓存到磁盘里...为什么 webpack 选择 terser？不再维护 uglify-es ，并且 uglify-js 不支持 ES6 +。...例如使用 ES6 开发的 JavaScript 文件需要使用 babel-loader 去处理。...cacheDirectory'], // 排除 node_modules 目录下的文件 // node_modules 目录下的文件都是采用的 ES5 语法，没必要再通过

2K3 0

【学习笔记】尚硅谷Webpack5入门到原理 | 高级篇

/, // 排除node_modules代码不编译 loader: "babel-loader", }, ], }, ], },...hot: true, // 开启HMR功能 }, mode: "development", devtool: "cheap-module-source-map",};Include/Exclude为什么开发时我们需要使用第三方的库或插件...而这些文件是不需要编译可以直接使用的。所以我们在对 js 文件处理时，要排除 node_modules 下面的文件。...;减少代码体积TreeShaking为什么开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。...（需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果）3.减少代码体积使用 Tree Shaking 剔除了没有使用的多余代码，让代码体积更小。

3.1K2 0

入门webpack的最佳实践（基于webpack4.X 5.X）--打包速度优化

目录缩小范围noParseIgnorePlugin优化 resolve 配置externals缓存缩小范围在配置 loader 的时候，我们需要更精确的去指定 loader 的作用目录或者需要排除的目录...，通过使用 include 和 exclude 两个配置项，可以实现这个功能，常见的例如：include：符合条件的模块进行解析exclude：排除符合条件的模块，不解析，优先级更高这样一来，一开始构建...，我们就能去除一些选项，比如，在使用babel-loader的时候{ test: /\.jsx?...externalsexternals 配置选项提供了「从输出的 bundle 中排除依赖」的方法，因为我们在每次打包的时候，有些依赖的变动很小，所以我们可以不选择不把依赖打包进去，而使用script标签的形式来加载他...的执行结果缓存起来，重新打包的时候，直接读取缓存缓存位置： node_modules/.cache/babel-loader配置//支持转义ES6/ES7/JSX{ test: /\.jsx?

1K2 0

webpack性能优化-构建速度

优化babel-loader babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率，因此我们可以通过添加cacheDirectory开启babel...js$/, exclude: /(node_modules)/, use: { loader: "babel-loader", options: {...id=babel'], // 排除 node_modules 目录下的文件 exclude: /node_modules/ ] }...id=babel'], // 排除 node_modules 目录下的文件 exclude: /node_modules/ ] }...IgnorePlugin IgnorePlugin插件的主要作用是，在打包时可以忽略无用的的内容，减小打包体积。具体使用可以参考官网的例子传送门 6.

4872 0

【webpack 性能优化】编译速度从 50S 到 7S

babel-loader 允许使用 Babel 和 webpack 转译 JavaScript 文件，有时候如果我们运行 babel-loader 很慢的话，可以考虑确保转译尽可能少的文件。...你可能使用 /\.m?js$/ 来匹配，这样有可能去转译 node_modules 目录或者其他不需要的源代码，导致性能下降可以通过 exclude 排除掉一些不需要编译的文件。...cacheDirectory=true')，loader 将使用默认的缓存目录node_modules/.cache/babel-loader，如果在任何根目录下都没有找到 node_modules 目录.../client')] } cache-loader 除了 babel-loader,如果我们想让其他的 loader 的处理结果也缓存，该怎么做呢？...DLL 文件为动态链接库，在一个动态链接库中可以包含给其他模块调用的函数和数据 为什么要用 DLL？

3.1K2 1

webpack4.41+性能优化（高级篇）

同时我们也可以为每个插件设置具体不同的配置项，如使用的线程数、是否开启debug模式等。...我们可以在MAC电脑使用快捷键command+shift+P，输入coverage–>选择Show Coverage，然后如下图所示点击如果不使用懒加载，你的代码属于Unused Bytes...，使用了之后，你的代码是是属于Used Bytes，我们的目的就是提高Used Bytes，这样就提高了代码覆盖率。...这里为什么写/[\\/]node_modules[\\/]/而不是/node_modules/？...形象比喻：树上很多果子代表函数，你只要一个果子，生产环境就是就会把整个树上无用的果子摇掉，简称“摇树Tree Shaking” 为什么必须使用ES6模块化import引入才能Tree Shaking呢？

6751 0

webpack优化解决项目体积大、打包时间长、刷新时间长问题！

如上图，这是一个编译过的es5的代码，因为你可以看到熟悉的原型对象，那我我们应该怎么使用include，或者exclude,比如我们配置webpack的时候我们在babel-loader中去配置： {.../src'), //使用exclude排除指定文件夹 exclude: /node_modules/ use: [{ loader: 'babel-loader' }]...其实我们可以使用热更新，来代替自动刷新，来提高开发体验，不要问我为什么，我体验过，那种每次改代码就要等十秒的感觉（我们公司的angular老项目就这样），那么热更新应该怎么使用呢？...base64格式，不使用用网络请求在我们打包时，如果遇见小型图片，我们可以直接转换成base64位格式，减少http请求就能达到前端性能优化的目的，使用方式非常简单 rules: [...hash，如果没改动的文件，命中缓存当我们在打包时，使用hash计算文件变动，如果文件被改变，则hash的值改变，在上线后，浏览器访问时没有改变的文件会命中缓存，从而达到性能优化的目的，使用方式如下：

9.3K4 1

webpack配置优化,让你的构建速度飞起_2023-02-28

/node_modules/, }, ], }, }; 由于babel-loader对文件的转化是非常耗时的，所以缩小构建范围首先就是缩小需要babel-loader处理的文件范围.../, // 排除node_modules代码不编译 loader: "babel-loader", }, ], }, ],...配置方式如下： module.exports = { cache: { type: "filesystem", // 使用文件缓存 }, }; Network Cache 将来开发时我们对静态资源会使用缓存来优化...但是加载速度还不够好，比如：是用户点击按钮时才加载这个资源的，如果资源体积很大，那么用户会感觉到明显卡顿效果。我们想在浏览器空闲时间，加载后续需要使用的资源。...（需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果）减少代码体积使用 Tree Shaking 剔除了没有使用的多余代码，让代码体积更小。

2.1K1 0

webpack实战——预处理器(loader)【上篇】

举个例子当使用 babel-loader 将 ES6+ 代码转化为 ES5 时，带入公式： “ES5 = babel-loader(ES6+) 上述描述说过，loader本身是一个函数那么loader...2.1 引入那loader到底应该如何使用呢？举例要在js中引入css文件： // index.js import '....2.2 链式loader 在上面我们说了需要在引入一个 style-loader 来进行样式渲染处理，先安装： // npm npm install style-loader // 或者 yarn...那么为什么要区分顺序呢？...通常情况下，在使用loader时，需要配置它，以此来加速打包速度，不配置的话打包会将所有模块打包，可能拖慢整体的打包速度。

9542 0

webpack配置优化,让你的构建速度飞起

/, // 排除node_modules代码不编译 loader: "babel-loader", }, ], }, ], },.../, // 排除node_modules代码不编译 include: path.resolve(__dirname, ".....配置方式如下：module.exports = { cache: { type: "filesystem", // 使用文件缓存 },};Network Cache将来开发时我们对静态资源会使用缓存来优化...但是加载速度还不够好，比如：是用户点击按钮时才加载这个资源的，如果资源体积很大，那么用户会感觉到明显卡顿效果。我们想在浏览器空闲时间，加载后续需要使用的资源。...（需要注意的是，进程启动通信都有开销的，要在比较多代码处理时使用才有效果）减少代码体积使用 Tree Shaking 剔除了没有使用的多余代码，让代码体积更小。

2.3K1 0

Webpack 性能系列一: 使用 Cache 提升构建性能

遇到 babel-loader、eslint-loader、ts-loader 等工具时可能需要重复生成 AST；分析模块依赖信息时则需要遍历 AST，执行大量运算；Seal 阶段也同样存在大量 AST.../node_modules'] cache.profile：是否输出缓存处理过程的详细日志，默认为 false cache.maxAge：缓存失效时间，默认值为 5184000000 使用时通常关注上述配置项即可...默认情况下，babel-loader 会将缓存内容保存到 node_modules/.cache/babel-loader 目录，用户也可以通过 cacheDirectory = 'dir' 方式设置缓存路径...默认情况下，babel-loader 会将缓存内容保存到 ./node_modules/.cache/eslint-loader 目录，用户也可以通过 cache = 'dir' 方式设置缓存路径。...使用 cache-loader 除 babel-loader、eslint-loader 这类特化 loader 自身携带的缓存功能外，Webpack 4 中还可以使用 cache-loader 实现与

3.5K2 1

你可能不知道的9条Webpack优化策略

// 例如，您可以使用`source：false`选项排除统计文件中模块的来源。...在webpack中利用缓存一般有以下几种思路： babel-loader开启缓存使用cache-loader 使用hard-source-webpack-plugin babel-loader babel-loader...: path.resolve('src'), use: ['babel-loader'] } ] } 这里babel-loader就会排除对node_modules.../app/js"], }; 为什么还要用动态Polyfill？...启用Scope Hoisting 要在 Webpack 中使用 Scope Hoisting 非常简单，因为这是 Webpack 内置的功能，只需要配置一个插件，相关代码如下： // webpack.config.js

1.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

为什么我们要在使用babel-loader时排除node_modules？

相关·内容

webpack5高级

webpack 4.x 初级学习记录

webpack实战——打包优化【上】

Webpack构建速度优化指南

Webpack 打包优化之速度篇

Webpack构建速度优化

webpack 学习笔记系列06-打包优化

入门webpack的最佳实践（基于webpack4.X 5.X）--打包速度优化

【Webpack】538- 打包速度提升指南

【学习笔记】尚硅谷Webpack5入门到原理 | 高级篇

入门webpack的最佳实践（基于webpack4.X 5.X）--打包速度优化

webpack性能优化-构建速度

【webpack 性能优化】编译速度从 50S 到 7S

webpack4.41+性能优化（高级篇）

webpack优化解决项目体积大、打包时间长、刷新时间长问题！

webpack配置优化,让你的构建速度飞起_2023-02-28

webpack实战——预处理器(loader)【上篇】

webpack配置优化,让你的构建速度飞起

Webpack 性能系列一: 使用 Cache 提升构建性能

你可能不知道的9条Webpack优化策略

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐