在react中导入好不好外部 javascript、jQuery、css 到 index.html文件在公共文件夹中。以及是否对应用程序性能有任何影响。
我在 React 应用程序中使用了一些 jQuery 函数。
示例：日期选择器
它也工作得很好
我需要知道推荐这种方式吗？
这对应用程序性能有影响吗？
- 或者不建议删除所有外部链接并使用 npm 或安装依赖项
纱？
- 当应用程序构建时如何反应以提高性能
node_module 而不是外部链接？如果它影响了性能。
索引.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 只会将使用的代码打包到一个包中，即 Tree Shaking，并丢弃未使用的代码。你也可以做一些代码分割 https://webpack.js.org/guides/code-splitting/使用 webpack，它可以帮助您仅加载当前页面的 javascript 代码。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
