在 react import 3rd party jQuery ,CSS ,Java Script to index.html 比使用 npm 或 yarn 好

Question

in react is it good to import external java script,jQuery ,css to index.htmal file in public folder.在 React 中，是否可以将外部 java 脚本、jQuery、css导入公共文件夹中的index.htmal文件。 and if there is any impact to application performance.以及是否对应用程序性能有任何影响。

and i used some j Query functions inside of react application.我在反应应用程序中使用了一些 j Query 函数。 example : datepicker it's also work fine示例：datepicker 它也可以正常工作

i need to know is this way recommended ?我需要知道这种方式是否推荐？
is this effect to application performance ?这对应用程序性能有影响吗？
or its not recomended & remove all external link and install dependencies with npm or yarn?还是不推荐并删除所有外部链接并使用 npm 或 yarn 安装依赖项？
when application build how react improve performance with当应用程序构建时如何反应提高性能
node_module rather than external links ? node_module 而不是外部链接？ if it hit performance.如果它达到性能。

index.html索引.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>

Answer 1

This is not recommended for modern front-end development:对于现代前端开发，不建议这样做：

A lot of unused css and javascript code will definitely affect web performance.大量未使用的 css 和 javascript 代码肯定会影响 web 性能。
- Increase javascript parse time.增加javascript解析时间。
- Increase file download time(Chrome has a limit of 6 connections per host name).增加文件下载时间（Chrome 每个主机名限制为 6 个连接）。
Since bootstrap and jQuery appear earlier than webpack, webpack works not good with them.You should consider using React-Bootstrap, antd, Material-UI etc instead of bootstrap,由于 bootstrap 和 jQuery 比 webpack 出现得更早，webpack 对它们不好用。你应该考虑使用 React-Bootstrap、antd、Material-UI 等代替 bootstrap，
When you use es6 module to introduce dependencies, webpack will only package the code used to one bundle, AKA tree shaking, and discard the unused code.使用es6模块引入依赖时，webpack只会将用到的代码打包成一个bundle，即摇树，丢弃不用的代码。 You can also do some Code Splitting with webpack, which can help you load javascript code for current page only.您还可以使用 webpack 进行一些代码拆分，它可以帮助您仅加载当前页面的 javascript 代码。

在 react import 3rd party jQuery ,CSS ,Java Script to index.html 比使用 npm 或 yarn 好

问题描述

1 个解决方案

解决方案1
1 2019-04-12 08:28:55

在 react import 3rd party jQuery ,CSS ,Java Script to index.html 比使用 npm 或 yarn 好

问题描述

1 个解决方案

解决方案1 1 2019-04-12 08:28:55

解决方案1
1 2019-04-12 08:28:55