在反馈中导入第三方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>
答案

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

  1. 很多未使用的css和javascript代码肯定会影响Web性能。 增加javascript解析时间。 增加文件下载时间(Chrome每个主机名限制为6个连接)。
  2. 由于bootstrap和jQuery出现在webpack之前,因此webpack对它们的效果不好。你应该考虑使用React-Bootstrap,antd,Material-UI等代替bootstrap,
  3. 当您使用es6模块引入依赖关系时,webpack将仅打包用于一个包的代码,AKA树抖动,并丢弃未使用的代码。你也可以用webpack做一些Code Splitting,它可以帮助你加载当前页面的javascript代码。

以上是关于在反馈中导入第三方jQuery,CSS,Java Script到index.html是好的,而不是使用npm或yarn的主要内容,如果未能解决你的问题,请参考以下文章

android 导入第三方jar包,在程序中导入包中的类无效;

如何在Jsp页面中导入JAVA类

在 index.html 中导入 css 和在 Angular 5 中导入 styleUrls 的区别

无法在 .tsx 文件中导入 CSS 模块

为啥在 TypeScript 中导入 CSS 不起作用?

如何在 Vue.js 中导入 css?