Javascript 在react import第三方jQuery、CSS中,index.html的Java脚本比使用npm或JARN更好

Javascript 在react import第三方jQuery、CSS中,index.html的Java脚本比使用npm或JARN更好,javascript,reactjs,npm,coding-style,external-links,Javascript,Reactjs,Npm,Coding Style,External Links,在react中,最好将外部java脚本、jQuery、css导入到公用文件夹中的index.htmal文件中。以及是否对应用程序性能有任何影响 我在react应用程序中使用了一些j查询函数。 示例:日期选择器 它也很好用 我需要知道这是推荐的方式吗 这对应用程序性能有影响吗 或者不推荐使用它&删除所有外部链接并使用npm或 纱线 应用程序构建时如何使用 节点\u模块而不是外部链接?如果它达到性能 index.html <html lang="en"> <head>

在react中,最好将外部java脚本、jQuery、css导入到公用文件夹中的index.htmal文件中。以及是否对应用程序性能有任何影响

我在react应用程序中使用了一些j查询函数。 示例:日期选择器 它也很好用

  • 我需要知道这是推荐的方式吗

  • 这对应用程序性能有影响吗

  • 或者不推荐使用它&删除所有外部链接并使用npm或 纱线
  • 应用程序构建时如何使用
    节点\u模块而不是外部链接?如果它达到性能
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>

您需要启用JavaScript才能运行此应用程序。

这不建议用于现代前端开发:

  • 大量未使用的css和javascript代码肯定会影响web性能

    • 增加javascript解析时间
    • 增加文件下载时间(Chrome限制每个主机名有6个连接)
  • <> L> >P>由于Bootstrap和jQuery比WebPACK更早出现,WebPACK对它们不太好。您应该考虑使用Bootstrap、ANTD、材质UI等代替Bootstrap,

  • 当您使用es6模块引入依赖项时,webpack将只打包用于一个bundle(又名树抖动)的代码,并丢弃未使用的代码。您还可以使用webpack执行一些操作,这可以帮助您仅为当前页面加载javascript代码