webpack打包优化之外部扩展externals的实际应用

2020-01-17 23:21:54

参考地址 webpack打包优化之外部扩展externals的实际应用

前言

使用vue-cli创建项目,使用webpack打包。其中,有一个webpack优化webpack.optimize.CommonsChunkPlugin,它会将node_modules中的必需模块提取到vendor文件中,项目开发中,增加第三方模块,比如element-uivue-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

数组内的每一个元素都可以是多种形式,包括objectregexfunctionstring四种:

object

object形式,可以直接作为externals的值,这种形式是绝大部分项目中的配置形式。它里面一定是键值对(key: value)的形式。

function

function的使用,只能在array形式中作为一个元素传入。

regex

正则匹配的形式,通过传入正则表达式来实现匹配。这个可以放在数组形式中,也可以直接作为externals的属性。

实际案例

案例地址
以上说了如何配置的问题,在工作中,具体会是一个怎样的表现呢。我挑选了一个常用的配置object形式,做了一些操作,对比下。

  • 第一种情况,完全不使用externals配置。
    第一种情况的截图
    first build
    first browser load

  • 第二种情况,通过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>

第二种情况的截图:
second build
second browser load

这两种情况,我们主要从打包的时间,打包之后包的大小,实际浏览器中加载时长三个方面来做比较。

打包时间

打包时间,由原来的38s缩短至18s,大大减少了打包时间。

打包之后包的大小

主要看vendor包的大小,由原来的1.45M缩小至41.3k,缩小的内容,我们使用cdn,使其存在于外部环境。
由于externals属性,是将依赖排除,本该将node_modules中依赖包打入到vendor bundle中,变成外部扩展。

浏览器加载

使用externals属性,外部扩展,会增加请求数,由原来的6个请求变成了9个请求。由于是使用CDN,非首次请求,会使用缓存中的数据,所以加载时间不受太大影响。
截图所示时间不同,这个和多方面因素有关。你在相同的环境,每次刷新得到的结果都不一样。

需要注意

如果发现问题,可以通过以下几个方向查找:

  1. script的先后顺序

  2. cdn的地址路径是否正确

  3. 浏览器的window属性值,是否和你的externals属性的value相对应。可以在console控制台输出看看。

  4. externals的打包支持什么类型的,就和output.libraryTargetoutput.library 这两个属性有关系了。唐霜讲的清楚点,可以看看

参考

  1. 外部扩展Externals

  2. webpack externals详解

  3. 本案例地址


  • 2019-09-04 16:50:35

    CMake入门笔记

    Make是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程)。他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C++特性,类似UNIX下的automake。只是 CMake 的组态档取名为 CMakeLists.txt。Cmake 并不直接建构出最终的软件,而是产生标准的建构档(如 Unix 的 Makefile 或 Windows Visual C++ 的 projects/workspaces),然后再依一般的建构方式使用。这使得熟悉某个集成开发环境(IDE)的开发者可以用标准的方式建构他的软件,这种可以使用各平台的原生建构系统的能力是 CMake 和 SCons 等其他类似系统的区别之处。

  • 2019-09-05 20:51:15

    在Android上使用FFmpeg压缩视频

    libavcodec-提供了更加全面的编解码实现的合集 libavformat-提供了更加全面的音视频容器格式的封装和解析以及所支持的协议 libavutil-提供了一些公共函数 libavfilter-提供音视频的过滤器,如视频加水印、音频变声等 libavdevice-提供支持众多设备数据的输入与输出,如读取摄像头数据、屏幕录制 libswresample,libavresample-提供音频的重采样工具 libswscale-提供对视频图像进行色彩转换、缩放以及像素格式转换,如图像的YUV转换 libpostproc-多媒体后处理器

  • 2019-09-05 20:54:21

    在Android 中使用FFmpeg命令

    到这里就可以运行FFmpeg命令了。一直我也是这样使用,但是我在做这个项目Cut的时候发现连续调用多次FFmpeg命令会报错(在项目需要,先改变分镜头的速度,再合成视频)。 为什么会这样的呢?

  • 2019-09-06 10:30:20

    ffmpeg错误码

    AVERROR_BSF_NOT_FOUND = -1179861752 AVERROR_BUG = -558323010 AVERROR_DECODER_NOT_FOUND = -1128613112 AVERROR_DEMUXER_NOT_FOUND = -1296385272 AVERROR_ENCODER_NOT_FOUND = -1129203192 AVERROR_EOF = -541478725 AVERROR_EXIT = -1414092869 AVERROR_FILTER_NOT_FOUND = -1279870712 AVERROR_INVALIDDATA = -1094995529 AVERROR_MUXER_NOT_FOUND = -1481985528 AVERROR_OPTION_NOT_FOUND = -1414549496 AVERROR_PATCHWELCOME = -1163346256 AVERROR_PROTOCOL_NOT_FOUND = -1330794744 AVERROR_STREAM_NOT_FOUND = -1381258232 AVERROR_BUG2 = -541545794 AVERROR_UNKNOWN = -1313558101

  • 2019-09-08 09:05:54

    MyBatis Generator 插件的拓展插件包

    应该说使用Mybatis就一定离不开MyBatis Generator这款代码生成插件,而这款插件自身还提供了插件拓展功能用于强化插件本身,官方已经提供了一些拓展插件,本项目的目的也是通过该插件机制来强化Mybatis Generator本身,方便和减少我们平时的代码开发量。

  • 2019-09-08 09:09:48

    mybatis-generator自动生成代码插件使用详解

      mybatis-generator是一款在使用mybatis框架时,自动生成model,dao和mapper的工具,很大程度上减少了业务开发人员的手动编码时间,今天自己研究了一下,也分享一下使用心得供大家简单使用。