vue + ant design vue 项目打包优化

2023-11-16

废话不多说,直接上代码

main.js

注释掉 vue 和 antdv
Vue.use(antd); 这句话一定不能删除

antd 变量虽然没有定义,但是,是cdn资源里面的模块,一定要引入进来

如果提示 antd 未定义可能是 cdn 资源问题,
参考 : https://blog.csdn.net/qq_31254489/article/details/113097548


参考代码:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import App from './App'
// import Vue from 'vue'
// import antd from 'ant-design-vue';
// import 'ant-design-vue/dist/antd.css';
import router from './router'

Vue.config.productionTip = false
Vue.use(antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

webpack.base.conf.js

其实完全不需要修改 webpack 配置,网上一堆说使用 externals 的,其实不用,直接注释掉 import 就行了

index.html

引入3个cdn

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <link href="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.min.js"></script>
 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>ocs-helper</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <link href="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/ant-design-vue/dist/antd.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>
打包

npm run build

没有优化前

在这里插入图片描述

优化后

在这里插入图片描述

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

vue + ant design vue 项目打包优化 的相关文章

随机推荐

  • resnet50网络结构_轻量(高效)目标检测网络结构设计

    目标检测网络可以分成如图的5个部分 input image 输入图像的大小对整个网络推断耗时有最直接的影响 小的图像 自然整个网络推断时间就会大大减少 一般来说 输入图像大小与网络深度正相关 即 大图像需要更深的网络提取更好的特征 back
  • JS下setTimeout与setInterval二者的差异

    JS下setTimeout与setInterval二者的差异 很多人都觉得这两个方法差不多 但是 实际上 他们差的很远呢 因为setTimeout 表达式 延时时间 在执行时 是在载入后延迟指定时间后 去执行一次表达式 记住 次数是一次 而
  • Linux I2C 驱动实验

    一 I2C 驱动 本章同样以 I MX6U ALPHA 开发板上的 AP3216C 这个三合一环境光传感器为例 通过 AP3216C 讲解一下如何编写 Linux 下的 I2C 设备驱动程序 Linux 的驱动分离与分层的思想 因此 Lin
  • 数据库DML数据操作语言

    文章目录 DML 数据操作语言 1 插入数据 INSERT 1 1 语法 1 2 插入默认值 注意事项 1 3 全列插入 2 修改数据 UPDATE 2 1 语法 注意 2 2 修改指定记录 添加WHERE子句 1 WHERE子句中常用的条
  • 前端面试之开发中遇到的问题【建议收藏】

    N1 精度问题 0 1 0 2 0 3 使用math js或者big js解决问题致命 重视 N2 频繁请求问题 点击按钮发送请求 但是不能疯狂发请求 等到结果返回后可再次发送请求 可以定义一个flag待请求结束打开flag 1 代码习惯
  • 年底了,清空自己,让心归零!

    眨眼一年 荏苒半生 时光总是别样匆匆 其实这一生 不就是一年一年这样过着 转眼到中年 而后到老年 时间总是悄无声息 让你我措手不及 转眼就年底了 我们都该学会沉淀自己 把过往一键清零 让未来一切重头 年底了 做个总结吧 这一年以来 让你觉得
  • 为何出现Java HotSpot(TM) 64-Bit Server VM warning: Sharing is only supported for boot loader classes ...

    当在IDEA中连接Redis时出现 Java HotSpot 64 Bit Server VM warning Sharing is only supported for boot loader classes because bootst
  • 大数据技术之Zookeeper

    第1章 Zookeeper入门 1 1 概述 Zookeeper是一个开源的分布式的 为分布式框架提供协调服务的Apache项目 Zookeeper从设计模式角度来理解 是一个基于观察者模式设计的分布式服务管理框架 它负责存储和管理大家都关
  • 前端html通栏做法实践

    在前端通栏中也有很多种 今天给大家分享我做的一种 大家可以借鉴一下 虽然可能就一般 但是一般的通栏也就够用了 大家可以根据自己的需求来自行设计即可 这只是一个参考模板而已 下面的代码复制即可用 html代码
  • web worker API开启浏览器js多进程

    面试使人进步 在大厂佬们的碾压下接触到了目前工作中没有遇到的新api和新思路以及解决方案 今天就来说说这个新的api web Worker 以下是MDN原话 指的是一种可由脚本创建的后台任务 任务执行中可以向其创建者收发信息 要创建一个 W
  • 关于微信小程序海报画布绘制

    小程序需要关于用户点击分享时弹起画布海报分享朋友或者朋友圈 1 我们需要先要创建一个画布 然后需要在js里去初始化画布并且制作出想要的画布海报样式 到目前为止咱们的画布海报图已经可以出现了 接下来咱们可以将已生成的海报图片 保存到手机或者分
  • vue 计算属性 vs 方法, 过滤器

    vue 计算属性 vs 方法 过滤器 最近换项目了 终于重新开始 使用 vue 了 继续学习中 computed 计算属性将被混入到 Vue 实例中 所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例 变量
  • vue项目部署到nginx服务器

    相信很多刚学习vue的朋友都可以进行到将vue项目进行npm run build这部 对于将build后的结果部署到nginx服务器上却一知半解 作者刚开始的时候也是很迷惑 看到网上很多朋友在问 今天作者就将自己的部署过程记录下来 供大家参
  • Keil MDK5生成bin文件时生成了*.bin文件夹

    在Keil魔术棒中通过以下方式生成bin文件时 看提示命令执行成功 却生成了一个 bin文件夹 文件夹内部是两个bin文件 当时感觉很奇怪 第一次遇到这种情况 使用的命令 fromelf exe bin o firmware L bin o
  • Object的方法(对象的遍历,合并等)。

    1 构造函数 Object 创建一个新的 Object 对象 该对象将会包裹 wrapper 传入的参数 2 静态方法 Object assign 通过复制一个或多个对象来创建一个新的对象 Object create 使用指定的原型对象和属
  • 5个高清视频素材网站,免费下载~

    免费高清视频素材网站 这几个你一定要知道 建议收藏 1 菜鸟图库 https www sucai999 com video html v NTYxMjky 菜鸟图库网素材非常丰富 网站主要还是以设计类素材为主 高清视频素材也很多 像风景 植
  • Prometheus和Grafana

    1 首先简单介绍Prometheus和Grafana Prometheus是由SoundCloud开发的开源监控报警系统和时间序列数据库 TSDB 它是一个监控采集与数据存储框架 监控服务器端 具体采集什么数据依赖于Exporter 监控客
  • TrueCrypt简介、在VS2008下的编译过程

    转载请标明是引用于 http blog csdn net chenyujing1234 欢迎大家拍砖 编译过程中用到的工具下载地址 http download csdn net detail chenyujing1234 4448383 资
  • JSP学习之初识JSP(实现简单的计算器)

    IE浏览器 gt Tomcat gt 数据库 访问JSP的过程 如果是第一次访问 jsp文件被服务器翻译成一个对应的java文件 Servlet 然后 再被编译成一个 class文件并装载到服务器的内存中 如果以后访问JSP 那就直接调用内
  • vue + ant design vue 项目打包优化

    废话不多说 直接上代码 main js 注释掉 vue 和 antdv Vue use antd 这句话一定不能删除 antd 变量虽然没有定义 但是 是cdn资源里面的模块 一定要引入进来 如果提示 antd 未定义可能是 cdn 资源问