webpack打包文件过大的优化,提取第三方库(vue,ali-oss)到cdn,externals配置

2023-11-15

问题产生原因:

vue或用其他第三方库webpack打包导致某单文件js过大。

优化形式:

webpack的externals配置,从输出的 bundle 中排除依赖。

可将第三方库放到html用cdn加载。类似<script src="...."></script>

调试方式:

可参考vue-cli 脚手架生成的webpack配置。

可执行下面命令

npm run build --report  //不清楚可以百度(webpack-bundle-analyzer)

之后,浏览器 F12 看NetWork,各个资源加载时间。

参考:

webpack外部扩展(externals)

https://webpack.docschina.org/configuration/externals/

阿里oss的引入Browser.js SDK 方式

https://help.aliyun.com/document_detail/64041.html?spm=a2c4g.11186623.6.1360.5c3b18c9jpzU7N

具体代码:

//webpack.base.conf.js

module.exports = {
  .......

  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'vuex':'Vuex',
    'axios': 'axios',
    'ali-oss': 'OSS',
  },

  ........
}
//index.html

<!--vue cdn-->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>

<!-- axios -->
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

<!--阿里云 oss-->
<!-- 兼容IE的promise -->
<!-- <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script> -->
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.1.1.min.js"></script>

其他第三方UI库同样,element-ui,vant-ui等

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

webpack打包文件过大的优化,提取第三方库(vue,ali-oss)到cdn,externals配置 的相关文章

随机推荐

  • Mysql 学习

    文章目录 下载 安装 修改 修改登录密码 授权 下载 Mysql 数据库的下载链接 注意 CenterOS 请选择 Red Hat 那一项 安装 这里介绍的是 5 7 版本 安装包是 rpm bundle tar 结尾的 创建 mysql
  • ZC-CLS381RGB颜色识别——配置寄存器组(上)

    文章目录 前言 一 ZC CLS381RGB简介 二 配置寄存器组 1 主控寄存器 2 检测速率寄存器 2 增益寄存器 2 颜色数据寄存器 三 状态转移图和信号波形图绘制 总结 前言 在现代工业生产中 颜色识别技术已经成为了一个非常重要的技
  • 使用JsonConvert.DeserializeObject注意事项

    在使用JsonConvert DeserializeObject反序列化自定义对象的时候 我遇到了一个问题 定义了一个对象QueryModel QueryModel拥有两个构造方法 私有无参构造方法 private QueryModel 跟
  • android直接方法和虚方法,Android NDK入门:C++ 基础知识

    为什么写这篇文章 本文算作是 Android 音视频开发打怪升级 系列文章的 番外 篇 原本打算将本文的内容写在 Android FFmpeg视频解码播放 这篇文章中 因为要想学习 FFmpeg 相关知识 C 的基础知识是必不可少的 但是写
  • java集合框架Map之HashMap底层原理解析

    感兴趣的话大家可以关注一下公众号 猿人刘先生 欢迎大家一起学习 一起进步 一起来交流吧 哈希表 hash table 哈希表也称为散列表 散列表 Hash table 也叫哈希表 是根据关键码值 Key value 而直接进行访问的数据结构
  • STM32——HAL版——定时器ms和us延时函数

    定时器做ms和us延时函数 本文用的是STM32L431RCT6芯片 定时器TIM2和TIM6挂载在APB1总线上 1 配置TIM2为ms延时定时器 TIM2为通用定时器在APB1总线上 主频为80MHz 设置TIM2参数 时钟源选择为内部
  • Android应用请求获取Root权限

    要让Android应用获得Root权限 首先Android设备必须已经获得Root权限 应用获取Root权限的原理 让应用的代码执行目录获取最高权限 在Linux中通过chmod 777 代码执行目录 代码如下 应用程序运行命令获取 Roo
  • 企业实践

    欢迎关注 全栈工程师修炼指南 公众号 点击 下方卡片 即可关注我哟 设为 星标 每天带你 基础入门 到 进阶实践 再到 放弃学习 花开堪折直须折 莫待无花空折枝 文章目录 0x00 前言简述 1 背景了解 2 发展历程 3 产品版本 4 官
  • Tensorflow入门——自制数据集:将未经处理的图片制成npy格式的数据集

    一些吐槽和文章简介 博主是那种 拿来就用 不会再查 的人 而几乎所有教程都秉持着 这应该是python课教的 的理念 从而使得没学过python的人颇为头疼 博主虽接触过python 但还没系统学过 阅读一篇代码 最耗时的部分不是探索算法原
  • Java基础(二):System.arraycopy()和Arrays.copyof()

    目录 1 Arrays copyOf 和 System arrayCopy 1 1 Arrays copyOf 1 2 System arrayCopy 1 3 区别 1 Arrays copyOf 和 System arrayCopy 1
  • java中用iterator去检查最大值,如何从Java 8中的Iterator获取n个第一个值?

    I have sorted a HashMap using Sort a Map by values Java to that I have a LinkedHashMap i e an Iterable which garantees i
  • maven 自定义archetype

    Maven提供了archetype帮助我们快速构建项目骨架 很便捷 但是 中央仓库中的archetype版本过于陈旧 构建好项目后 需要修改很多信息 甚是麻烦 那么如何自定义个archetype就显得很有必要 自定一个archetype须遵
  • numpy中的np.random.rand、np.random.randn、np.random.randint、np.random.uniform等用法

    随机数生成方法 1 np random rand d0 d1 dn np random rand d0 d1 dn 生成一个指定形状的 0 1 之间均匀分布的随机数数组 参数d0 d1 dn指定了生成的随机数数组的维度 import num
  • js光标事件

    JavaScript是基于对象 object based的语言 而基于对象的基本特征 就是采用事件驱动 event driven 它是在图形界面的环境下 使得一切输入变化简单化 通常鼠标或热键的动作我们称之为事件 Event 而由鼠标或热键
  • DNF管理软件包

    DNF是一款Linux软件包管理工具 用于管理RPM软件包 DNF可以查询软件包信息 从指定软件库获取软件包 自动处理依赖关系以安装或卸载软件包 以及更新系统到最新可用版本 DNF与YUM完全兼容 提供了YUM兼容的命令行以及为扩展和插件提
  • 【文心一言】如何申请获得体验资格,并简单使用它的强大功能

    目录 一 文心一言 1 1 它能做什么 1 2 技术特点 1 3 申请方法 二 功能体验 2 1 文心一言 2 2 写冒泡排序代码 测试代码 2 3 画一个爱心 2 4 画一个星空 三 申请和通过 3 1 申请时间 3 2 通过时间 文心一
  • 【MATLAB第2期】源码分享#基于LSTM时间序列单步预测,含验证和预测未来

    MATLAB第2期 源码分享 基于LSTM时间序列单步预测 含验证和预测未来 1 运行环境 matlab2020a cpu 2 数据说明 单列数据 2018 10 2018 12 共三个月 92个数据 3 数据处理 样本标准化处理 其中 前
  • 含重复点的蚁群算法

    背景 以论文 汉中市城市生活垃圾收运路线优化研究 为背景 共37个位置 一个是车库 一个是垃圾处理中心 剩下35个是垃圾收集站 每次都是垃圾搬运车从车库出发 经过7个垃圾收集站 运到到垃圾处理中心 重复5次 直到35个垃圾收集站的垃圾都收集
  • Stata字符串函数:快捷提取字符信息

    1 substr 函数的用法 语法 substr s n1 n2 a s为需要进行提取的字符串 b n1表示提取的起始位置 c 对于不同编码的文本 n2代表不同含义 对于纯ASCII编码的文本 n2表示要提取字符长度为n2的字符串 而对于其
  • webpack打包文件过大的优化,提取第三方库(vue,ali-oss)到cdn,externals配置

    问题产生原因 vue或用其他第三方库webpack打包导致某单文件js过大 优化形式 webpack的externals配置 从输出的 bundle 中排除依赖 可将第三方库放到html用cdn加载 类似 调试方式 可参考vue cli 脚