webpack打包优化之外部扩展externals的实际应用
目录
- 前言
- externals定义
- 用法
- string
- array
- object
- function
- regex
- 实际案例
- 打包时间
- 打包之后包的大小
- 浏览器加载
- 需要注意
- 参考
前言
使用vue-cli
创建项目,使用webpack
打包。其中,有一个webpack
优化webpack.optimize.CommonsChunkPlugin
,它会将node_modules
中的必需模块提取到vendor
文件中,项目开发中,增加第三方模块,比如element-ui
、vue-echarts
等,vendor
的包都会增大。这个时候,就需要考虑减轻vendor
包的大小,增加构建速度。我们可以使用webpack
的外部扩展(externals
)功能。
externals定义
externals
配置选项,将指定的内容排除在构建的vendor
中,但是,指定的内容需要出现在用户环境中。
以上是我的理解。
官方解释是:
The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's environment.
externals
配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反,所创建的 bundle 依赖于那些存在于用户环境(consumer's environment)中的依赖。
用法
防止将某些 import
的包打包到bundle
中,而是在运行时(runtime
)再去外部获取这些扩展依赖(external dependencies
)
可以通过多种编写方式实现:string
,array
,object
,function
,regex
。这里,我只说一些简单的内容,详细讲解,我觉得这个解释不错。
module.exports = {// ...externals: [ // array形式{ // object形式'./a', 'a', // string形式jquery: 'jQuery', vue: 'Vue',},function(context, request, callback) { // function形式if(request.substr(0, 1) !== '.') callback(null, 'commonjs ' + request)callback()},/^[a-z\-0-9]+$/, // regex形式]
}
除了function形式
,必须在array形式
中,其他形式,都可以提升,直接作为externals
属性使用。比如string
形式:
externals: {'./a': 'a',jquery: 'jQuery'
}
string
属性名称是jquery
,表示应该排除import $ from 'jquery'
中的 jquery
模块。为了替换这个模块,jquery
的值将被用来检索一个全局的$
变量。换句话说,当设置为一个字符串时,它将被视为全局的,我们需要在全局变量中,找到$
,才能使程序正确运行。
array
数组内的每一个元素都可以是多种形式,包括object
, regex
, function
, string
四种:
object
object
形式,可以直接作为externals
的值,这种形式是绝大部分项目中的配置形式。它里面一定是键值对(key: value)的形式。
function
function
的使用,只能在array形式
中作为一个元素传入。
regex
正则匹配的形式,通过传入正则表达式来实现匹配。这个可以放在数组形式中,也可以直接作为externals
的属性。
实际案例
案例地址
以上说了如何配置的问题,在工作中,具体会是一个怎样的表现呢。我挑选了一个常用的配置object形式
,做了一些操作,对比下。
第一种情况,完全不使用
externals
配置。
第一种情况的截图
- 第二种情况,通过
npm run build --report
得出的报告,将一些不常修改的大包作为外部扩展。
这需要做两步操作:第一步修改webpack.base.conf.js
文件,第二步,将外部扩展的内容通过其他方式加载到window
环境,这里,我们通过<script>
标签,并使用cdn
来完成。
配置的文件:webpack.base.conf.js
externals: {vue : 'Vue',"echarts": 'echarts',"element-ui": 'ELEMENT'
}
在模板文件index.html
中,添加<script>
标签
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui@2.4.11/lib/index.js"></script>
<script src="https://unpkg.com/echarts@4.1.0/dist/echarts.min.js"></script>
第二种情况的截图:
这两种情况,我们主要从打包的时间,打包之后包的大小,实际浏览器中加载时长三个方面来做比较。
打包时间
打包时间,由原来的38s
缩短至18s
,大大减少了打包时间。
打包之后包的大小
主要看vendor
包的大小,由原来的1.45M
缩小至41.3k
,缩小的内容,我们使用cdn,使其存在于外部环境。
由于externals
属性,是将依赖排除,本该将node_modules
中依赖包打入到vendor bundle
中,变成外部扩展。
浏览器加载
使用externals
属性,外部扩展,会增加请求数,由原来的6个请求
变成了9个请求
。由于是使用CDN
,非首次请求,会使用缓存中的数据,所以加载时间不受太大影响。
截图所示时间不同,这个和多方面因素有关。你在相同的环境,每次刷新得到的结果都不一样。
需要注意
如果发现问题,可以通过以下几个方向查找:
- script的先后顺序
- cdn的地址路径是否正确
- 浏览器的
window属性
值,是否和你的externals
属性的value相对应。可以在console控制台
输出看看。 externals
的打包支持什么类型的,就和output.libraryTarget
和output.library
这两个属性有关系了。唐霜讲的清楚点,可以看看
参考
- 外部扩展Externals
- webpack externals详解
- 本案例地址
转载于:https://www.cnblogs.com/weiqinl/p/10020773.html
webpack打包优化之外部扩展externals的实际应用相关推荐
- webpack打包优化之外部扩展(Externals)配置
基本使用 webpack可以使用externals配置,将某些模块不打包到输出文件中,从而使用用CDN引入外部模块 这样操作下来,不仅可以提高打包速度,还能优化网页加载性能. index.html & ...
- Webpack打包优化-外部扩展externals的实际应用
Webpack打包优化-外部扩展externals的实际应用 拆分文件 我们在使用js库如vue或者react等的时候,webpack会将他们一起打包,react和react-dom文件就好几百k,全 ...
- webpack打包vue反编译_2020年你必须知道的webpack打包优化方法
本文字数:3534字 预计阅读时间:10分钟 随着我们的项目项目越做越大,引入的第三方库会越来越多,打包的依赖也越来越多,每次 build 的时间越来越长,打包出来的文件会越来越大.最糟糕的是单页面应 ...
- webpack打包优化
webpack打包优化 开发环境优化 1.开启热模块替换(HMR) **原因:**如果不开启 HMR功能 的话,修改某一个模块的时候,所有模块都会重新打包 实现: 给devServer添加 hot:t ...
- 混合开发与移动端--H5混合开发、H5页面的开发布局、开发注意事项、H5与原生(安卓)交互、webpack打包优化解决方案、H5调试工具、webview
H5混合开发 混合开发.原生开发.H5开发的区别: 简述:主流APP:原生APP.H5(webapp).混合APP,相对应的定制研发即原生开发.H5开发.混合开发 原生APP开发优缺点: 可以访问手机 ...
- webpack打包优化配置
文章目录 前言 不进行任何打包配置 代码分离 splitChunk runtimeChunk 动态导入 css文件处理 css文件提取 css文件压缩 css实现Tree Shaking js实现Tr ...
- html 打包优化,Webpack打包优化
一.前言 对于使用vue开发项目的FE来说,打包上线这个环节相信大家都不陌生.本文主要是介绍如何通过webpack(实践版本:webpack4.16.5)的配置来提高打包构建速度以及减小包的体积. 二 ...
- webpack打包优化_前端性能优化:webpack性能调优与Gzip原理
链接:https://juejin.im/book/5b936540f265da0a9624b04b 从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程: DNS 解析 TCP 连 ...
- 看看webpack打包优化
webpack 打包策略,主要有下列几种方法. 1.CDN2.DllPlugin3.splitChunks4.happypack 下面详细介绍使用的流程. CDN 通常使用的第三方模块很大时,但是又想 ...
最新文章
- Matlab实现图像白平衡(灰度世界法、全反射算法)
- matlab有限域多项式除法_椭圆曲线密码学简介(二):有限域的椭圆曲线及离散对数问题...
- 大工18秋c c 语言程序设计,大工19秋《可编程控制器》在线作业3【满分答案】
- python123程序设计题说句心里话_用c++写一个简单的计算器程序
- CAN总线基础(二)——CAN总线物理层介绍(总线电压详解)
- ext.ajax.request跨域,跨域Ajax访问header中 x-requested-with丢失
- oracle变量名,Oracle中的替换变量,变量名,变量名
- 大数据自学——Spark
- 快手:“我有一把大宝剑”
- Win10下ImageAI-gpu训练自己的数据集
- 基于[三星6818]芯片超声波测距驱动编写
- 微信小程序中输出大于号和小于号
- 愿以三生烟火,换君一世迷离
- Scipy总结(constants)
- 微信小程序支付 退款 订单查询 退款查询
- 从战略到执行:业务领先模型 BLM 的第一把钥匙「差距分析」
- 腿部建模布线解析—3D角色建模师必了解的人体结构
- C++stoi、stol、stoll 函数用法
- PL/SQL破解方法(不需要注册码)
- C语言之找数组中重复的数
热门文章
- magrittr | R语言的管道操作符
- php 上传word文件 源码,THINKPHP中word文档的上传与下载
- sqlserver php用户登陆页,SQLServer限制IP,限制用户,限制SSMS登录
- 今天聊:做好前端的 10 个习惯
- props传递对象_vue-父组件传值props(对象)给子组件
- viewcube翻译_view cube是什么意思
- oracle goldengate 数据库实例,案例:Oracle goldengate报错ggsci: error while loading shared libraries:...
- java 多态判断非空_Java 面试知识点解析基础知识
- 擅长排列的小明(nyoj19)
- hihoCoder-1097-最小生成树一·Prim算法 (最小生成树)