vue项目中每个插件的大小

废话:当我们制作vue项目时,随着功能的增多会发现引入的插件越来越多,当然这不是一件好事情,等到一定是后我们就会接受到领导的一句:“你给咱们看一下,咋们网站别人访问怎么怎么慢呢?”
要点:这时,你就要主要到 是因为插件引入过多的原因,在哪里可以看出他的大小呢?
在这里插入图片描述
前端的都知道这个地方,我就不解释了,把这个下载下来,看一下大小,正常项目的大小都是在1.2M左右,
然后,我们知道了vendorjs的总大小,然后还是不知道怎么办,接下来你需要知道每一个插件的大小,从而决定哪些插件需要引入cdn(也就是js的外部引入),
首先你需要安装
1.npm install --save-dev webpack-bundle-analyzer
2.webpack.conf.js中的module.exports里面加入
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
然后运行:npm run build --report
运行完成后在你的终端中就可以看到你的访问地址,访问之后就可以看到效果图了。
然后把大的文件,使用cdn引入,从而就解决了vendorjs过大的情况

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
400个插件,下面的详细列表: mxp/ColdFusion的Include mxp/80多个国家的一个下拉菜单,在某些时候的确挺方便的 mxp/检查当前文件的兼容性和可能包含的错误,并给出详细的检测报告 mxp/在代码编辑框选择一段脚本代码,然后使用这个插件,可以把这些代码放到一个单独的js文件 mxp/在Dreamweaver快速的插入一个Fireworks做好的图片,不过好象只能做空白图 :( mxp/这个插件用来代替Dreamweaver File菜单下的New Form Template命令。作用是可以侦测出站点内的模板,这样就直接打开了,而不象以前还需要在对话框选择 mxp/在代码编辑环境下,插入一个脚本函数,函数名和参数都可以自定义的 mxp/这个插件很有意思,让你的窗口从大变小,或者从小变大 mxp/用来更新Configuration-TagAttributeList.txt这个文件 mxp/插入文空格 mxp/Jet制作的飘浮图片插件,没时间封装,Redidea友情封装 mxp/Chromeless Windows标题bug修改版 mxp/使窗口过一段时间后自动关闭 mxp/用来做电子商务的插件。不过只停留在表面的html语句和form的action,没有涉及后台程序 mxp/替换Dreamweaver自带的show-hide layer behavior,从而使更好的支持Netscape 6 mxp/用来代替Dreamweaver自带的Set Text of Layer behavior,从而使得在Netscape 6下兼容 mxp/打开一个新窗口,并让窗口在屏幕上居 mxp/Chromeless Windows,比我做的X-window好。 mxp/可以联合Authorware, CourseBuilder extension for Dreamweaver ,UltraDev, Macromedia Flash Learning Extensions, and Director等等的一系列软件做一个教学站点 mxp/对当前文件生成一个备份文件,以便修改 mxp/在site窗口的文件上点一下右键就出现这个插件了。作用是把文件复制或者移动到某个文件夹 mxp/层的转换特效,2.0版 mxp/加入JSP的Include mxp/用表单外部的事件来提交表单 mxp/用表单外部的事件来控制表单的行为,包括提交,清空等等 mxp/可以对文本框的内容做多种限制,比如不包含空格、引号等等 mxp/在Dreamweaver的File菜单下加一个Print code命令,用来打印代码 mxp/Splash Window,也叫chromeless splash , 一种效果很不错的浏览器窗口 mxp/在代码编辑窗的点右键,可以快速跳转到特定的代码行 mxp/在site窗口的本地文件夹选择一个文件点右键,就可以打开当前文件所在的目录,很方便的 mxp/在代码编辑框点右键就可使用。该插件可以让插件编写者用一些Windows风格的对话框来和用户进行交互 mxp/创建一个JustSo风格的相册 mxp/插件开发者使用,用来Debug mxp/Dreamweaver的Menu.xml是记录Dreamweaver菜单信息的文件,由于某些原因,经常容易损坏,此插件可以创建备份文件并恢复 mxp/打开一个Web对话框窗口,也是很特别的一种,没有最大和最小化按钮 mxp/使一个多行的表格行和行之间颜色交替,像斑马线一样。2.0版本 mxp/可以倒出-倒入站点信息,方便其他开发者 mxp/插入e-Vue MPEG-4格式的文件 mxp/Mycomputer.com提供的一套Banner交换系统,使用起来需要注册,比较麻烦 mxp/MyComputer.com提供的一套站点访问跟踪系统,也是需要注册,使用麻烦 mxp/在页面加入一个SiteMiner.com搜索引擎的接口,MyComputer.com提供 mxp/在页面加入一个MyComputer.com提供的留言本,需要注册,使用麻烦 mxp/计算代码的字符个数 mxp/一个比Dreamweaver自带的Jump menu更好的下拉导航菜单 mxp/对Dreamweaver目录下的FtpExtensionsMap.txt文件进行编辑。此文件定义了某类型的文件以二进制或者文本方式ftp mxp/自动将窗口最大化 mxp/由MyComputer.com提供的一套投票程序,需要注册,使用烦琐 mxp/用来在Dreamweaver环境下编辑安装目录下的Extensions.txt文件,此文件记录的文件扩展名和文件类型的关系 mxp/加入一个指向邮件地址的连接,并可以自定

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lar_slw

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值