在 react 中，将外部java脚本、jQuery、css导入公共(public)文件夹中的index.htmal文件是否很好。以及是否对应用程序性能有任何影响。
我在 React 应用程序中使用了一些 j 查询函数。 示例:日期选择器 它也很好用
我需要知道是否推荐这种方式？
这对应用程序性能有影响吗？
- 或不推荐并删除所有外部链接并使用 npm 或安装依赖项 纱？
- 当应用程序构建时，React 如何提高性能
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 代码肯定会影响网络性能。
- 增加 javascript 解析时间。
- 增加文件下载时间(Chrome 限制每个主机名 6 个连接)。
由于 bootstrap 和 jQuery 比 webpack 出现得早，webpack 不能很好地配合它们。您应该考虑使用 React-Bootstrap、antd、Material-UI 等来代替 bootstrap，
当您使用 es6 模块引入依赖项时，webpack 只会将使用过的代码打包到一个 bundle 中，即 tree shaking，并丢弃未使用的代码。你也可以做一些Code Splitting使用 webpack，它可以帮助您仅加载当前页面的 javascript 代码。
关于javascript - 在 react 导入 3rd 方 jQuery，CSS，Java 脚本到 index.html 比使用 npm 或 yarn 更好，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55646152/