Question

我创建了一个reactjs + webpack SPA并在“ Google pagespeed见解”中对其进行了测试。我只有一个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在主体末尾加载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'));

此处是Google问题：

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

Answer 1

我在dist / index.html文件中添加了'defer =“ true”'，并且效果更好（提高了50％）。然后通过使用React-Loadable我分割了文件。现在一切都已归档。

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

1 个答案: