webpack externals键值研究

最新推荐文章于 2021-11-01 10:20:49 发布
最新推荐文章于 2021-11-01 10:20:49 发布
阅读量376 收藏
点赞数
分类专栏： 前端 文章标签： externals webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Superman_peng/article/details/117822344
版权
本文探讨了如何使用webpack的externals属性进行性能优化，避免将特定包打包到bundle中，而是通过cdn在运行时获取。externals的键对应于依赖包名，其值用于指定全局变量，这个全局变量在引入的CDN链接中定义，从而实现外部引用。解决externals值困惑的方法是检查源码以确定正确的全局变量名称。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

做性能优化缩小打包体积时，利用externals+cdn方案，防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖。

能够了解externals的键为依赖的包名

但对于这个externals的值就有点迷了，官方文档上给的解释是酱紫的：
在这里插入图片描述

在这里插入图片描述
关键的一句话是：为了替换jquery模块，jQuery的值将被用来检索一个全局的jQuery变量
对于这句话我的理解是：import $ from 'jquery'中，原始没配置过externals时，jquery会从nodemodules里面找到依赖；但是配置完extrenals之后，jquery: 'jQuery'，jQuery这个全局变量将会替换jquery，jQuery从哪里来的呐？就是我们html引入的CDN链接里面暴露出来的全局变量！！！

最低0.47元/天 解锁文章
（15）webpack externals
秋来九月八
11-02 656
externals 是用来解决不需要打包的库，避免打包后的体积过于庞大。 在实际的开发中，很多库可以采用cdn的方式引入。比如jquery,并不需要通过node 安装jquery而是采用链接的方式直接引入 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 当然还有很多ui库 bootstrap或者element-ui 是可以通过cdn引入的。 vue和react实际上都可以通过c
vue项目使用webpack打包的文件过大
zhangxiaodui的博客
10-24 1567
场景 最近被反馈说用vue做的一个官网首次加载很慢，要好多秒，需要进行一下优化，下面说一下我的探索历程。 1.这是中途接手的一个项目，我发现里面有一些本地的第三方库并没有用到或者node modules里已经有了，比如font awesome，bootstrap等，我就把她们删掉了，还有多余的图片也删掉了。 2.从网上搜了方法，把config文件夹下的index.js文件里的productionS...
webapck的externals对象的key和value解释
大赚万万亿
06-23 936
webapck的externals属性 key和是指import后面的那个值 value是指全局对象
webpack之externals操作三部曲--正确的姿势
热门推荐
qiqi学习园地
08-31 1万+
排除误区： 看到有人误解externals的作用，所以必须先正确认识externals的作用 1.作用 首先webpack提供这个==externals==选项作用是==从打包的bundle文件中排除依赖==。换句话说就是让在项目中通过import引入的依赖在打包的时候不会打包到bundle包中去，而是通过script的方式去访问这些依赖。 2.怎么用？ 以jque...
webpack externals
全栈修炼
08-14 2372
webpack externals详解 在众多的webpack配置教程中，对externals这个配置选项，总是一带而过，把文档中提到的几种方式都复述一遍，但是对于开发者而言，根本没法完全理解。本文试图通过一整篇文章，详细的对externals这个参数进行讲解。 几种用法 externals这个参数的传入形式有多种，但是总结而言，实际上就是array > object，reg，这三种形式都可以传入，前者其实是对后者的包含。 array形式 数组内的每一个元素又可以是多种形式，包括object, reg
webpack 的externals配置 (externals有啥用)
qq_37899792的博客
12-03 8591
为什么要配置externals 官网解释： webpack 中的 externals 配置提供了不从 bundle 中引用依赖的方式。解决的是，所创建的 bundle 依赖于那些存在于用户环境(consumer environment)中的依赖。 怎么理解呢，意思是如果需要引用一个库，但是又不想让webpack打包（减少打包的时间），并且又不影响我们在程序中以CMD、AMD或者window...
webpack引入cdn的js
05-19
可以使用webpack的externals配置项来引入cdn的js，避免打包到bundle中。 举个例子，假设要引入jQuery的cdn： ...需要注意的是，externals配置项的值是一个对象，键名为引入的模块名，键值为全局变量名。
Webpack配置降级指南：electron-leveldown与pouchdb集成
另一种方法是在`webpack.config.js`中使用`externals`属性来指定外部依赖。这是一种更为简洁的方式，可以告诉Webpack某些模块是外部提供的，不需要被打包进去： ```javascript { ... externals: { "pouchdb": ...
【voice-ui】从零开始搭建，配置webpack
Voiceu的博客
06-30 802
临近校招，因无实习，还非科班，想给简历加分，故只能自己做项目，但类似后台管理系统、购物商城的都已经烂大街了，所以尝试一下能不能做点难度稍微高一点的ui组件库 环境配置 建立仓库 在github上建立fun ui仓库，注意现在github上默认的分支不是master了，我克隆到本地的后，练习上传到另一个地址时，发现不用master了，是main分支 在建立的时候勾选了，为仓库创建README文件和 .gitignore文件， .gitignore文件，在里面写了的文件，不会被git工具进行更新，比如后续会
『Webpack系列』—— externals用法详解
树上骑个猴的博客
11-01 8135
本文用项目例子是用Vue Cli3搭建的Vue项目 如果小伙伴有做过首屏加载时间优化，应该会遇到chunk-vendors.js这个文件，巨大无比，加载时间超长，是首屏加载时间过长的罪魁祸首之一。 下面通过一个实际的项目来演示，先通过插件webpack-bundle-analyzer来可视化地查看chunk-vendors.js这个文件里面地内容。 npm install webpack-bundle-analyzer --save-dev 在vue.config.js中引入这插件 const Bu.
webpack的externals优化项目
weixin_39782183的博客
03-10 689
用webpack打包项目的时候，如果项目体量比较大，往往打出来的包vender.js会很大，导致首屏加载慢，这时候用webpack提供的externals属性，像vue.js 、vuex.js 、vue-router.js 这些外部库，基本不会变的，如果将它们独立出来单独加载就能利于浏览器的缓存机制，不用每次都重新加载这些库js，并且大大的减少了打包的vendor.js文件 优化的步骤有两步，...
Webpack的externals的理解
山海一哥的博客
04-27 1万+
webpack官网介绍： 防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。 webpack的externals 上面的信息是什么意思呢？ 你可以通过script方式引入后，在文件中直接使用$这里是没有问题的，如果你使用了eslint，它会提示你该变量未定义。但是如果...
laravel+vue项目优化加载
weixin_30878361的博客
08-07 258
前言 最近做一个项目是php的laravel+vue的项目，刚开始还好，用的东西还不多也挺顺利的，遇到的问题也都解决了，随着项目功能的增多，项目的首页加载速度也越来越慢，打开控制台，app.js文件竟然加载了6、7s，这是一个非常不好的体验，下面就记录一下我的优化方法。 一.查看加载 　　一般项目结构都是这样的： 　　 　　1.安装插件webpack-bundle-...
webpack中external的使用
rolinabc的博客
10-09 2037
在我们日常开发中，经常能够听到‘跨域’这个字眼，那么跨域是什么呢？ 跨域其实是由浏览器的同源策略造成的 那么同源策略又是什么呢？ 同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 什么又是同源呢？ 如果两个 URL 的 协议、域名、端口号都相同的话，则这两个 URL 是同源。 具体看下面的表格...
webpack-externals暴露全局变量
qq_43618136的博客
04-19 1420
webpack-externals暴露全局变量 用require的方式来使用依赖库，但是却不希望webpack将它又编译进文件中。 externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。也就是说webpack打包时不会把库打入bundle中 下面以jQuery为例使用externals进行配置 module.exports = { ... output: ...
webpack 最好的日志_webpack externals 深入理解
weixin_39714191的博客
12-20 297
按照官方文档的解释，如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用。假设：我们开发了一个自己的库，里面引用了lodash这个包，经过webpack打包的时候，发现如果把这个lodash包打入进...
vue-cli脚手架中webpack配置基础文件详解
weixin_34253539的博客
05-10 684
一、前言 vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webp...
webpack之externals解析
少油少盐不要辣
07-20 1848
1.是什么 可以指定排除掉不想被webpack打包的模块。一般适用于库的开发。 2.既然模块不被打包，那么项目中的引入语句如何处理呢？ webpack会根据你对模块的配置，将引入语句，编译生成对应环境下引入语句。 3.如何使用 具体参见官方文档，下面说下要点。 如果库的打包为UMD格式的，即：libraryTarget: 'umd'，那么需要配置一个对象。如： externals: { lodash: { commonjs: 'lodash', amd: 'lodash
webpack打包的externals用法以及常用的cdn资源
weixin_45942304的博客
05-08 879
webpack打包，externals加载外部资源，左边名字是固定的，是你从script引入的名字，右边是你页面中使用的名字，externals的意思就相当于引入并use的意思了，然后就可以在页面中把你npm使用到的注释掉如下： import vue from ‘Vue’ 这是externals的格式 externals: { vue: ‘Vue’, ‘vue-router’: ‘Router’, axios: ‘axios’, jquery: ‘$’, ‘element-ui’: ‘ElementUI’,
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值