如何优化React Web应用程序的初始页面加载,尤其是针对移动应用程序的图像?

我有一个用react/redux和webpack编写的相当复杂的web应用程序。它的登录页面由两张图片和主应用程序模块组成。所有其他模块都是延迟加载的,这取决于用户想做什么。当我使用google devtools进行审计时,我得到的性能分数是74,这还不错。

但iphone的初始页面加载时间超过15秒! 我需要优化它。

图像 其中一个图像是html正文的背景,以便它显示加载其他页面的时间。另一个是主页组件的背景。主页图像是不可协商的,它必须在那里。我身体里的那个更灵活,但看起来很酷。

现在,主页图像使用webpack url加载程序导入到react组件中,因此在app bundle中。这是最好的办法吗?另一个图像直接加载到body元素的index.html中。我不知道哪条路最快。

我也不是图像专家,所以也许我可以做些什么来压缩或优化图像?是否有跨平台使用的“最佳尺寸”?还有什么工具可以用来改变?我的系统上有gimp,但可以用别的东西。

飞溅 如果用户在加载时看到“某物”会很好,这样他们就可以更有耐心。现在他们只看到一个空白的白色屏幕。我跟踪了所有的favicon发生器,并按照指示对它们进行了设置。但这并没有引起轰动。有什么我能做的吗?我甚至试图在html中改变一个不同的颜色背景,但这也没有出现。

CSS 为了组织我的项目代码,我构建了所有组件化的东西。我的样式表 主要地 坐在每个组件旁边,然后导入到使用它的位置。这些也通过使用minicssextractloader和css loader的webpack绑定。我附上我的网页包配置-有什么我可以做的吗?

WebPACK 我还能做什么来减少初始加载时间?这是我的webpack.common和webpack.prod设置。任何想法都将受到赞赏!

webpack.common.js网站

const path = require('path');
var webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const sourcePath = path.join(__dirname, './src');
const autoprefixer = require('autoprefixer');
const CopyWebpackPlugin = require('copy-webpack-plugin');


module.exports = {
  entry: {
      app: './src/index.js'
  },
  output: {
      filename: '[name].[chunkhash:4].js',
      chunkFilename: '[name].[chunkhash:4].js', //name of non-entry chunk files
      path: path.resolve(__dirname, 'dist'),  //where to put the bundles
      publicPath: "/" // This is used to generate URLs to e.g. images
    },
  module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader"
          }
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: "html-loader",
              options: { minimize: true }
            }
          ]
        },

        {
          test: /\.(scss|sass|css)$/,
          use: [
              MiniCssExtractPlugin.loader,
              { loader: 'css-loader' },
              { loader: 'postcss-loader',
                  options: {
                    plugins: () => [autoprefixer({ grid: false})]
                  }
              },
              {
                loader: 'fast-sass-loader',
                options: {
                  includePaths: [  path.resolve(__dirname, 'src'), path.resolve(__dirname, 'src','styles') ,'./node_modules', '/node_modules/materialize-css/sass/components'],
                  sourceMap: true
                }
              }
          ]

        },
        {
          test: /\.(jpg|png)$/,
          loader: 'url-loader',
          options: {
            limit: 8192 // inline base64 URLs for <=8k images, direct URLs for the rest
          },
        },
        {    
          test: /\.svg/,
          use: {
            loader: 'svg-url-loader',
            options: {}
          }
        }

      ]
    },

    resolve: {
      alias: {
        components:  path.resolve(__dirname, 'src', 'components'),
        navigation:  path.resolve(__dirname, 'src', 'navigation'),
        reducers:    path.resolve(__dirname, 'src', 'reducers'),
        actions:     path.resolve(__dirname, 'src', 'actions'),
        routes:      path.resolve(__dirname, 'src', 'routes'),
        utils:       path.resolve(__dirname, 'src', 'utils'),
        styles:      path.resolve(__dirname, 'src', 'styles'),
        images:      path.resolve(__dirname, 'public', 'images'),
        public:      path.resolve(__dirname, 'public'),
        test:        path.resolve(__dirname, 'src', 'test'),
        materialize: path.resolve(__dirname, 'node_modules', 'materialize-css', 'sass', 'components')
      },
      // extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
      modules: [
        path.resolve(__dirname, 'node_modules'),
        sourcePath
      ]
    },
    optimization: {
          splitChunks: {
              cacheGroups: {
                  js: {
                      test: /\.js$/,
                      name: "commons",
                      chunks: "all",
                      minChunks: 7,
                  },
                  styles: {
                    test: /\.(scss|sass|css)$/,
                    name: "styles",
                    chunks: "all",
                    enforce: true
                  }
              }
          }
    },
  plugins: [
    new CleanWebpackPlugin(['dist']),
    new CopyWebpackPlugin([ { from: __dirname + '/public', to: __dirname + '/dist/public' } ]),
    new MiniCssExtractPlugin({filename: "[name].css"}),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin({
       "template": "./src/template.html",
       "filename": "index.html",
       "hash": false,
       "inject": true,
       "compile": true,
       "favicon": false,
       "minify": true,
       "cache": true,
       "showErrors": true,
       "chunks": "all",
       "excludeChunks": [],
       "title": "ShareWalks",
       "xhtml": true,
       "chunksSortMode": 'none' //fixes bug
       })
   ]
};

网页包.prod.js

 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
const WorkboxPlugin = require('workbox-webpack-plugin');


 module.exports = merge(common, {
   mode: 'production',
   devtool: 'source-map',
   plugins: [
          new WorkboxPlugin.GenerateSW({ 
          // these options encourage the ServiceWorkers to get in there fast     
           // and not allow any straggling "old" SWs to hang around     
           clientsClaim: true,     
           skipWaiting: true
      }),
   ]
});