1

下面是 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',
        options: {
          sourceMap: true,
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
      'sass-loader'
      ]
    },
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      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
    })
  ]
};

服务器.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, res,next) {
    console.log('Home app.use')
    handleRender(req, res, 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 项目中提高分数？

4

0 回答 0