如何在 reactjs+webpack 的正文末尾呈现 javascript 文件？答案

【问题标题】：how to render javascript files at the end of body in reactjs+webpack?如何在 reactjs+webpack 的正文末尾呈现 javascript 文件？
【发布时间】：2018-10-04 14:57:21
【问题描述】：

我创建了一个 reactjs+ webpack SPA 并在“Google pagespeed insight”上对其进行了测试。我只有一个 main.js 文件，它在一开始就被渲染了。 here is the result

我该如何解决这个问题？

这是我的 webpack 配置：

const HtmlWebPackPlugin = require("html-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin({
      cache: true,
      parallel: true,
      // uglifyOptions: {
      //   compress: false,
      //   ecma: 6,
      //   mangle: true
      // },
    })]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader?cacheDirectory=true"
        }
      },
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test: /\.(ttf|eot|woff|woff2)$/,
        use: {
          loader: "file-loader",
        },
      },
      {
        test: /\.(png|jpg|svg)$/,  
        use: [{
            loader: 'file-loader',
            options: { 
                limit: 8000, // Convert images < 8kb to base64 strings
                name: 'static/[name].[ext]'
            } 
        }]
    },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

我如何告诉 webpack 在 body 的末尾加载 js 文件？或任何其他有助于解决此问题的解决方案？

而我的 index.html 和 index.js 文件就是这么简单。

index.html：

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="utf-8">
    <meta
        name="viewport"
        content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
    />
    <link rel="shortcut icon" type="image/png" href="static/favicon.png"/>
    <title>آسان یادبگیر</title>
</head>
<body dir="rtl">
    <div id="mainDiv">
    </div>
</body>
</html>

index.js：

import React from "react";
import ReactDOM from "react-dom";
import Theme from './styles/theme';
import { MuiThemeProvider} from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import './styles/style.css';
import RTL from './jss-rtl';
import './static/favicon.png'
import App from './app';

ReactDOM.render(
    <RTL>
        <MuiThemeProvider theme={Theme}>
        <React.Fragment>
            <CssBaseline/>
            <App/>
        </React.Fragment>
        </MuiThemeProvider>
    </RTL>,
    document.getElementById('mainDiv'));

这里是谷歌问题：

Eliminate render-blocking JavaScript and CSS in above-the-fold content: None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

移除阻止渲染的 JavaScript： https://asanyadbegir.com/main.js

【问题讨论】：

您需要分享最低限度和相关代码，以便我们帮助您解决问题
@Think-Twice 我发布了我的 webpack 配置文件。
你想在网页中显示所有的 .js 文件吗？这是你的问题吗？
我想从“google pagespeed insight”中获得更高的分数。我在问题的末尾添加了 google Suggestion。
我在 dist/index.html 文件中添加了 ' defer="true" '，它变得更好了。但我认为这不是真正的解决方案。

标签： reactjs webpack

【解决方案1】：

我在 dist/index.html 文件中添加了 ' defer="true" '，它变得更好（50% 更好）。然后通过使用 React-Loadable 我拆分了我的文件。现在所有的东西都是文件。

【讨论】：