如何检查脚本依赖?

时间:2013-07-13 09:21:46

标签: javascript jquery performance

我需要问的问题是如何在我的网站上检查脚本的依赖性?为什么我需要这样做:

我正在努力更新客户的现有网站,我必须提高网站的性能,问题是网站上有许多未使用的脚本(即大多数都在那里但是那里)功能未被使用)增加了网站的加载时间并删除它们,我不知道如何检查不必要的脚本。

所以我的问题是,有什么方法可以检查网站不需要的脚本,删除它们不会破坏网站的功能吗?

以下是他们使用过的“一堆”脚本,我很确定大部分脚本都是不必要的,但我不能冒风险删除它们,因为大约有100页使用这些脚本。我可以说大部分都是不必要的这一事实是因为他们自己编写的脚本的质量加上还有其他标志。

<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/jquery.min.js"></script>
<!-- jQuery UI -->
<script src="js/plugins/jquery-ui/jquery.ui.core.min.js"></script>
<script src="js/plugins/jquery-ui/jquery.ui.widget.min.js"></script>
<script src="js/plugins/jquery-ui/jquery.ui.mouse.min.js"></script>
<script src="js/plugins/jquery-ui/jquery.ui.draggable.min.js"></script>
<link href="css/plugins/jquery-ui/smoothness/jquery.ui.theme.css" rel="stylesheet"
    type="text/css" />
<!-- Touch enable for jquery UI -->
<script src="js/plugins/jquery-ui/jquery.ui.core.min.js"></script>
<script src="js/plugins/jquery-ui/jquery.ui.widget.min.js"></script>
<script src="js/plugins/jquery-ui/jquery.ui.sortable.min.js"></script>
<script src="js/plugins/jquery-ui/jquery.ui.resizable.min.js"></script>
<script src="js/plugins/touch-punch/jquery.touch-punch.min.js"></script>
<!-- slimScroll -->
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="js/plugins/validation/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/plugins/validation/additional-methods.min.js" type="text/javascript"></script>
<!-- vmap -->
<script src="js/plugins/vmap/jquery.vmap.min.js"></script>
<script src="js/plugins/vmap/jquery.vmap.world.js"></script>
<script src="js/plugins/vmap/jquery.vmap.sampledata.js"></script>
<link href="css/plugins/icheck/skins/square/blue.css" rel="stylesheet" type="text/css" />
<!-- Bootbox -->
<script src="js/plugins/bootbox/jquery.bootbox.js"></script>
<!-- Flot -->
<script src="js/plugins/flot/jquery.flot.min.js"></script>
<%-- <script src="js/plugins/flot/jquery.flot.bar.order.min.js"></script>--%>
<script src="js/plugins/flot/jquery.flot.pie.min.js"></script>
<script src="js/plugins/flot/jquery.flot.resize.min.js"></script>
<script src="js/plugins/flot/jquery.flot.stack.js" type="text/javascript"></script>
<!-- imagesLoaded -->
<script src="js/plugins/imagesLoaded/jquery.imagesloaded.min.js"></script>
<!-- PageGuide -->
<script src="js/plugins/pageguide/jquery.pageguide.js"></script>
<!-- FullCalendar -->
<script src="js/plugins/fullcalendar/fullcalendar.min.js"></script>
<script src="js/plugins/chosen/chosen.jquery.min.js" type="text/javascript"></script>
<!-- Theme framework -->
<script src="js/plugins/icheck/jquery.icheck.min.js" type="text/javascript"></script>
<!-- Theme scripts -->
<script src="js/plugins/datatable/jquery.dataTables.js" type="text/javascript"></script>
<script src="js/application.min.js"></script>
<!-- Just for demonstration -->
<script src="js/select2.min.js"></script>
<script src="js/demonstration.min.js"></script>
<!-- Favicon -->
<link rel="shortcut icon" href="css/images/logo.png" />
<!-- Apple devices Homescreen icon -->
<link href="Resources/Plugins/smartPaginator/smartpaginator.css" rel="stylesheet" />
<script src="Resources/Plugins/smartPaginator/smartpaginator.js"></script>
<script src="Resources/Plugins/smartPaginator/callPaginator.js"></script>
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png" />
<script src="js/plugins/modernizr.custom.32549.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>

2 个答案:

答案 0 :(得分:0)

我不明白你的问题。如果你知道没有使用其功能的脚本,你可以在你知道知道时删除它们,它们是不必要的。
如果你不确定,你有两个选项:

  • 删除它们并确保它们不会破坏任何东西。
  • 缩小和/或重构它们

答案 1 :(得分:0)

谷歌做了一个名为闭包编译器的工具 - 它不仅可以删除未使用的脚本,还可以缩小和捆绑东西。它可以对你的js加载时间产生很大的影响。把它拿到这里......

https://developers.google.com/closure/compiler/