在反馈中导入第三方jQuery,CSS,Java Script到index.html是好的,而不是使用npm或yarn
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在反馈中导入第三方jQuery,CSS,Java Script到index.html是好的,而不是使用npm或yarn相关的知识,希望对你有一定的参考价值。
反应是将外部javascript,jQuery,css导入公用文件夹中的index.html文件是好的。如果对应用程序性能有任何影响。
我在react应用程序中使用了一些j Query函数。例如:datepicker它也可以正常工作
- 我需要知道这种推荐方式吗?
- 这对应用程序性能有影响吗?
- 或者不建议删除所有外部链接并使用npm或yarn安装依赖项?
- 当应用程序构建时如何反应提高性能 node_module而不是外部链接?如果它达到了性能。
的index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="shortcut icon" href="%PUBLIC_URL%/external/images/favicon-96x96.png">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link href="./external/css/iconfont/material-icons.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./external/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./external/plugins/bootstrap-select/css/bootstrap-select.css">
<link rel="stylesheet" href="./external/plugins/node-waves/waves.min.css">
<link rel="stylesheet" href="./external/plugins/animate-css/animate.min.css">
<link rel="stylesheet" href="./external/css/style.css">
<link rel="stylesheet" href="./external/css/custom.css">
<link rel="stylesheet" href="./external/css/menu.css">
<link rel="stylesheet" href="./external/css/themes/theme-white.css">
<link rel="stylesheet" href="./external/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.standalone.css">
<link rel="stylesheet" href="./external/css/react_table.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
</div>
<script src="./external/plugins/jquery/jquery.min.js"></script>
<script src="./external/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="./external/plugins/bootstrap-select/js/bootstrap-select.js"></script>
<script src="./external/js/admin.js"></script>
<script src="./external/js/pages/index.js"></script>
<script src="./external/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<script src="./external/plugins/node-waves/waves.min.js"></script>
<script src="./external/plugins/autosize/autosize.min.js"></script>
<script src="./external/plugins/momentjs/moment.js"></script>
<script src="./external/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
</body>
</html>
答案
这不建议用于现代前端开发:
- 很多未使用的css和javascript代码肯定会影响Web性能。 增加javascript解析时间。 增加文件下载时间(Chrome每个主机名限制为6个连接)。
- 由于bootstrap和jQuery出现在webpack之前,因此webpack对它们的效果不好。你应该考虑使用React-Bootstrap,antd,Material-UI等代替bootstrap,
- 当您使用es6模块引入依赖关系时,webpack将仅打包用于一个包的代码,AKA树抖动,并丢弃未使用的代码。你也可以用webpack做一些Code Splitting,它可以帮助你加载当前页面的javascript代码。
以上是关于在反馈中导入第三方jQuery,CSS,Java Script到index.html是好的,而不是使用npm或yarn的主要内容,如果未能解决你的问题,请参考以下文章
android 导入第三方jar包,在程序中导入包中的类无效;