React SSR with redux 和 webpack Gtmetrix 分数优化后不增加

问题描述

下面是webpack生产文件

const webpack = require("webpack");
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionPlugin = require("compression-webpack-plugin");
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");

module.exports = {
  mode: 'production',watch: false,entry: {
    main : './src/client/index.js',FilterCss: './public/css/Filter.css',listingCss: './public/css/listingPage.css'
  },devtool:false,node: {
    fs: 'empty',child_process: "empty"
  },output: {
    path: path.join(__dirname,'/dist/'),filename: './[name].bundle.js'
  },resolve: {
    alias: {
    }
  },module: {
    rules: [{
      test: /\.js$/,exclude: /node_modules/,use: 'babel-loader'
    },{
      test: /\.css$/,use: [
          {
        loader: MiniCssExtractPlugin.loader
      },{
        loader: 'css-loader',options: {
          sourceMap: true,modules: true,localIdentName: '[local]'
        }
      }]
    },{
      test: /\.scss$/,use: [
          {
        loader: MiniCssExtractPlugin.loader
        },{
        loader: 'sass-loader',localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },'sass-loader'
      ]
    },{
      test: /\.jsx?$/,loader: 'babel-loader',query: {
          presets:['@babel/preset-env','@babel/preset-react']
      }
    },{
      test: /\.(jpe?g|png|gif)$/,loader: 'url-loader',options: {
        // Inline files smaller than 10 kB (10240 bytes)
        limit: 10 * 1024,},{
      test: /\.(jpe?g|png|gif|svg)$/,loader: 'image-webpack-loader',// This will apply the loader before the other ones
      enforce: 'pre',]
  },performance: {
    hints: false
  },optimization: {
    // nodeenv: 'production',minimize: true,// concatenateModules: true,// runtimeChunk: true,splitChunks: {
      // chunks: 'async',chunks:'all',// cacheGroups: {
      //   common: {
      //     test: /[\\/]node_modules[\\/]/,//     name: "vendors",//     chunks: "all",//   },// },runtimeChunk: 'single',plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),new FixStyleOnlyEntriesPlugin(),new webpack.ProvidePlugin({
      $: "jquery",jQuery: "jquery","window.jQuery": "jquery",}),new CompressionPlugin({
      asset: "[path].gz[query]",algorithm: "gzip",test: /\.js$|\.css$|\.html$/,threshold: 10240,minRatio: 0.8
    })
  ]
};

server.js

var express = require('express');
let cookieParser = require('cookie-parser');
var app = express();
const compression = require('compression');

const handleRender = require('./src/server/handleRender');
app.set('view engine','js');
app.engine('js',reactViews.createEngine());
require("@babel/polyfill");
var device = require('express-device');
require("@babel/register");


app.use(device.capture());
app.use(cookieParser());
app.use(compression());
app.use((req,res,next) => {
    res.set('Cache-Control','public,max-age=31557600')
    next()
})

app.use(express.static(__dirname + '/public'));
app.use('/dist',express.static('dist'));

app.get('/',function(req,next) {
    console.log('Home app.use')
    handleRender(req,next);
});

当我使用 pagespeed 检查分数时，它在桌面上显示 81%，但当我检查 gtmetrix 分数时，分数为 38%。

项目使用 React、redux、webpack 4 和 express。并遵循 https://github.com/william-woodhead/simple-universal-react-redux repo 和 https://redux.js.org/usage/server-rendering 进行服务器端渲染和实现。

如何在react-redux ssr项目中提高分数？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）