При импорте стороннего jQuery, CSS, Java Script в index.html лучше использовать npm или yarn - PullRequest
Новая
       44

При импорте стороннего jQuery, CSS, Java Script в index.html лучше использовать npm или yarn

0 голосов
/ 12 апреля 2019
В ответ

хорошо ли импортировать внешний java-скрипт, jQuery, css в файл index.htmal в общую папку. и если это повлияет на производительность приложения.

и я использовал некоторые функции j Query внутри приложения реагирования. пример: указатель даты это также отлично работает

  • Мне нужно знать, рекомендуется ли этот способ?

  • это влияние на производительность приложения?

  • или не рекомендуется, удалите все внешние ссылки и установите зависимости с помощью npm или пряжа?
  • когда сборка приложения реагирует на повышение производительности с
    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 Ответ

1 голос
/ 12 апреля 2019

Это не рекомендуется для современного внешнего интерфейса:

  1. Много неиспользуемого кода CSS и JavaScript определенно повлияет на производительность в сети.

    • Увеличение времени разбора JavaScript.
    • Увеличение времени загрузки файла (в Chrome установлено ограничение на 6 подключений на имя хоста).

  2. Поскольку bootstrap и jQuery появляются раньше, чем webpack, с ними веб-пакет работает плохо. Следует рассмотреть возможность использования React-Bootstrap, antd, Material-UI и т. Д. Вместо bootstrap,

  3. Когда вы используете модуль es6 для введения зависимостей, webpack будет упаковывать только код, использованный для одного пакета, встряхивая дерево AKA, и отбрасывать неиспользуемый код. Вы также можете сделать Code Splitting с веб-пакетом, который поможет вам загрузить код JavaScript только для текущей страницы.

...