我有一个相当复杂的 web 应用程序，用 React/Redux 和 webpack 编写，用于编译。它的登陆页面由 2 张图片和主应用程序模块组成。所有其他模块都是延迟加载的，具体取决于用户想要做什么。当我使用 google devtools 进行审计时，我得到了 74 的性能分数，这还不错。
但在 iphone 上，初始页面加载时间超过 15 秒！我需要优化它。
图片 其中一张图片是 html body 的背景，以便在其他页面加载时显示。另一个是主页组件的背景。主页图像是不可协商的，它必须在那里。身体中的那个我更灵活，但看起来很酷。
现在主页图像使用 webpack url-loader 导入到 react 组件中，因此在应用程序包中。这是最好的方法吗？另一张图片直接加载到 body 元素上的 index.html 中。我不确定哪个是最快的方法。
我也不是图像专家，所以也许我还能做些什么来压缩或优化图像？是否有跨平台使用的“最佳尺寸”？还有用什么工具来改变？我的系统上有 GIMP，但可以使用其他东西。
Splash 如果用户在加载时看到“某些东西”，那就太好了，这样他们就可以更有耐心了。现在他们只看到一个空白的白色屏幕。我已经关注了所有的网站图标生成器，并根据指示进行了所有设置。但飞溅没有显示。有什么我可以在那里做的吗？我什至尝试在 HTML 中更改不同颜色的背景，但这也没有显示出来。
CSS 为了组织我的项目代码，我构建了非常组件化的所有内容。我的样式表大多位于每个组件旁边，并被导入到使用它的地方。这些也由 webpack 使用 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
})
]
};
webpack.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
}),
]
});