2

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

我在反应应用程序中使用了一些 j Query 函数。示例： datepicker 它也可以正常工作

  • 我需要知道这种方式推荐吗？

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

  • 还是不推荐并删除所有外部链接并使用 npm 或 yarn 安装依赖项？
  • 当应用程序构建时，如何使用
    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>
4

1 回答 1

1

对于现代前端开发不建议这样做：

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

    • 增加 javascript 解析时间。
    • 增加文件下载时间（Chrome 每个主机名限制为 6 个连接）。

  2. 由于 bootstrap 和 jQuery 出现的时间比 webpack 早，所以 webpack 不能很好地配合它们。你应该考虑使用 React-Bootstrap、antd、Material-UI 等来代替 bootstrap，

  3. 当你使用 es6 模块引入依赖时，webpack 只会将使用过的代码打包到一个 bundle 中，AKA 摇树，并丢弃未使用的代码。您还可以使用 webpack 进行一些代码拆分，这可以帮助您仅加载当前页面的 javascript 代码。

于 2019-04-12T08:28:55.203 回答