gpt4 book ai didi

javascript - 在 react 导入 3rd 方 jQuery,CSS,Java 脚本到 index.html 比使用 npm 或 yarn 更好

转载 作者:行者123 更新时间:2023-11-29 23:00:58 25 4
gpt4 key购买 nike

在 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>

最佳答案

现代前端开发不推荐这样做:

  1. 大量未使用的 css 和 javascript 代码肯定会影响网络性能。

    • 增加 javascript 解析时间。
    • 增加文件下载时间(Chrome 限制每个主机名 6 个连接)。
  2. 由于 bootstrap 和 jQuery 比 webpack 出现得早,webpack 不能很好地配合它们。您应该考虑使用 React-Bootstrap、antd、Material-UI 等来代替 bootstrap,

  3. 当您使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com