在React导入第3方jQuery，CSS，Java Script到index.html方面要好于使用npm或yarn [英] In react import 3rd party jQuery ,CSS ,Java Script to index.html is good rather than using npm or yarn
问题描述
在反应中，将外部Java脚本jQuery，css导入公共文件夹中的index.htmal 文件是否很好.以及是否对应用程序性能有影响.
in react is it good to import external java script,jQuery ,css to index.htmal file in public folder. and if there is any impact to application performance.
，我在react应用程序内部使用了一些j查询函数. 例如:datepicker 也很好
and i used some j Query functions inside of react application. example : datepicker it's also work fine
-
我需要知道是否推荐这种方式吗?
i need to know is this way recommended ?
这对应用程序性能有影响吗?
is this effect to application performance ?
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>
推荐答案
不建议将其用于现代前端开发:
This is not recommended for modern front-end development:
-
大量未使用的CSS和javascript代码肯定会影响网络性能.
A lot of unused css and javascript code will definitely affect web performance.
- 增加javascript解析时间.
- 增加文件下载时间(Chrome对每个主机名限制为6个连接).
由于引导程序和jQuery早于webpack出现，因此webpack不适用于它们.您应该考虑使用React-Bootstrap，antd，Material-UI等代替引导程序，
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,
当您使用es6模块引入依赖关系时，webpack只会将用于打包的代码打包到一个包中，也就是摇晃树，并丢弃未使用的代码.您还可以使用webpack进行一些代码拆分，这可以帮助您加载JavaScript代码仅适用于当前页面.
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. You can also do some Code Splitting with webpack, which can help you load javascript code for current page only.
这篇关于在React导入第3方jQuery，CSS，Java Script到index.html方面要好于使用npm或yarn的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
