WordPress后台为何加载大量JS和CSS文件?

nZone 2023年10月28日更新于4月前 共1238字 89行代码 预计8分钟 评论 46
阿里云折扣】服务器活动对比【腾讯云秒杀

最近发现打开网站后台是相当的慢,我想是插件装多了,看下后台源代码到底加载了多少个 js 和 css 文件呢,你猜多少?80多个,这是通过提取网页源代码中的所有js或css链接排查发现的,其中注意到一个文件“jquery-ui.css”,这后面再说。

一、WordPress后台加载的文件

1、第三方插件12个(js和css数量各半)

/wp-content/plugins/akismet/_inc/akismet.css
/wp-content/plugins/akismet/_inc/akismet.js
/wp-content/plugins/akismet/_inc/akismet-admin.css
/wp-content/plugins/akismet/_inc/akismet-admin.js
/wp-content/plugins/akismet/_inc/fonts/inter.css
/wp-content/plugins/dark-mode-for-wp-dashboard//assets/css/dark-mode-dashboard.css
/wp-content/plugins/litespeed-cache/assets/css/litespeed.css
/wp-content/plugins/litespeed-cache/assets/js/litespeed-cache-admin.js
/wp-content/plugins/wp-dark-mode/assets/css/admin.min.css
/wp-content/plugins/wp-dark-mode/assets/js/dark-mode.min.js
/wp-content/plugins/wp-dark-mode/assets/vendor/chart.bundle.min.js
/wp-content/plugins/wp-dark-mode/assets/vendor/sizzle.min.js

2、第三方主题两个(都是css)

/wp-content/themes/beginlts/inc/options/css/fonts/fonts.css
/wp-content/themes/beginlts/inc/options/css/options.css

3、WP后台自带65个(其中3个是css,另外62个是js)

/wp-includes/js/admin-bar.min.js
/wp-includes/js/api-request.min.js
/wp-includes/js/backbone.min.js
/wp-includes/js/clipboard.min.js
/wp-includes/js/dist/a11y.min.js
/wp-includes/js/dist/date.min.js
/wp-includes/js/dist/deprecated.min.js
/wp-includes/js/dist/dom-ready.min.js
/wp-includes/js/dist/i18n.min.js
/wp-includes/js/dist/url.min.js
/wp-includes/js/dist/vendor/moment.min.js
/wp-includes/js/heartbeat.min.js
/wp-includes/js/hoverintent-js.min.js
/wp-includes/js/imgareaselect/imgareaselect.css
/wp-includes/js/imgareaselect/jquery.imgareaselect.min.js
/wp-includes/js/jquery/jquery.color.min.js
/wp-includes/js/jquery/jquery.query.js
/wp-includes/js/jquery/jquery.ui.touch-punch.js
/wp-includes/js/jquery/ui/autocomplete.min.js
/wp-includes/js/jquery/ui/core.min.js
/wp-includes/js/jquery/ui/datepicker.min.js
/wp-includes/js/jquery/ui/draggable.min.js
/wp-includes/js/jquery/ui/menu.min.js
/wp-includes/js/jquery/ui/mouse.min.js
/wp-includes/js/jquery/ui/slider.min.js
/wp-includes/js/jquery/ui/sortable.min.js
/wp-includes/js/json2.min.js
/wp-includes/js/mce-view.min.js
/wp-includes/js/media-audiovideo.min.js
/wp-includes/js/media-editor.min.js
/wp-includes/js/mediaelement/mediaelement-and-player.min.js
/wp-includes/js/mediaelement/mediaelement-migrate.min.js
/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css
/wp-includes/js/mediaelement/wp-mediaelement.min.css
/wp-includes/js/mediaelement/wp-mediaelement.min.js
/wp-includes/js/media-models.min.js
/wp-includes/js/media-views.min.js
/wp-includes/js/plupload/wp-plupload.min.js
/wp-includes/js/quicktags.min.js
/wp-includes/js/shortcode.min.js
/wp-includes/js/thickbox/thickbox.js
/wp-includes/js/underscore.min.js
/wp-includes/js/wp-ajax-response.min.js
/wp-includes/js/wp-auth-check.min.js
/wp-includes/js/wp-backbone.min.js
/wp-includes/js/wp-emoji-release.min.js
/wp-includes/js/wplink.min.js
/wp-includes/js/wp-lists.min.js
/wp-includes/js/wp-sanitize.min.js
/wp-includes/js/wp-util.min.js
/wp-admin/js/color-picker.min.js
/wp-admin/js/common.min.js
/wp-admin/js/dashboard.min.js
/wp-admin/js/edit-comments.min.js
/wp-admin/js/image-edit.min.js
/wp-admin/js/iris.min.js
/wp-admin/js/media-upload.min.js
/wp-admin/js/plugin-install.min.js
/wp-admin/js/postbox.min.js
/wp-admin/js/site-health.min.js
/wp-admin/js/svg-painter.js
/wp-admin/js/updates.min.js
/wp-includes/js/thickbox/thickbox.css
/wp-admin/css/colors/modern/colors.min.css
/wp-includes/css/editor.min.css

这只是算 js 和 css 文件,已经加载这么多了,怪不得打开 WordPress 后台很慢。但这些并不是真正原因,而是加载了访问不了的资源,加上这个刚好80个了。

如果是编辑文章页面,那更多,有上百个,恐怖如斯。

WordPress博客logo

二、解决加载 jQuery UI 打开后台很卡慢的问题

这个“jquery-ui.css”文件是来自Google的地址,搜索主题找到以下代码:

// 在适当的地方加载 jQuery UI 日期选择器

function load_datepicker() {
    wp_enqueue_script('jquery-ui-datepicker');
    //wp_enqueue_style('jquery-ui-style', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css');
}
add_action('admin_enqueue_scripts', 'load_datepicker');

这是用于加载 jQuery UI 日期选择器,这还不是 Begin 主题自带的,而是自己加上的,估计是我修复代码时加的,直接注释或删掉似乎也没啥影响。

猜解地址有更新了,目前最新版是 1.13.2 版。找到了其它可以访问的替代源,直接替换这个Google地址也是可以。

微软地址:

https://ajax.aspnetcdn.com/ajax/jquery.ui/1.13.2/themes/smoothness/jquery-ui.css

开源中国地址:

https://cdn.bootcdn.net/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css

官方地址:

https://code.jquery.com/ui/1.13.2/themes/smoothness/jquery-ui.css

微软的国内也是可以访问,不过开源中国的速度更快点。

这个地址改掉后,访问速度明显快多了,基本秒开了。看来以后访问很慢的可以看看有没加载国外的资源,最好用国内镜像替代,避免用国内浏览器访问受影响。

weinxin
公众号
闹着玩下网
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: