Question

我正在使用谷歌灯塔找出加快页面加载时间的方法。

其中一个重点是我错过了服务工作者。所以我得到了一个工作。

在我使用Service Worker之前，我的页面已经完全加载并在7秒内就绪。添加服务工作者后，我的页面在29秒内完全加载！

当我检查Fiddler是否正在进行时，看起来服务工作者正在加载所有文件，然后才让页面呈现。

我在webpack.config中使用SWPrecacheWebpackPlugin插件自动生成service-worker.js文件，因为我的库名称会自动进行哈希处理以优化缓存。

这是我的webpack.config：

const webpack = require('webpack');
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');

// To handle the regeneratorRuntime exception
require('babel-polyfill');

require('file-loader');
require('css-loader');
require('style-loader');
require('html-webpack-template');

/* Shared Dev & Production */

const config = {
  context: path.resolve(__dirname, 'src'),

  entry: {
    index: [
        // To handle the regeneratorRuntime exception
        'babel-polyfill',
        './index.js'
    ],
    vendor: ['react', 'react-dom', 'react-router', 'react-redux', 'history', 'react-router-dom', 'redux', 'react-router-redux', 'redux-form', 'lodash'],
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
        exclude: /\/favicon.ico$/,
        use: [
          {
            loader: 'file-loader',
            query: {
              name: '[path][name][hash].[ext]',
              publicPath: '/'
            }
          }
        ]
      },
      {
        test: /\.css$/,
        include: path.join(__dirname, 'src/style'),
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(ico)(\?.*)?$/,
        exclude: /node_modules/,
        use: {
          loader: 'file-loader',
          options: { name: '[name].[ext]' },
        },
      },
      {
        test: /\.xml/,
        use: {
          loader: 'file-loader',
          options: { name: '[name].[ext]' },
        },
      },
    ],
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: '/',
  },

  resolve: {
    extensions: ['.js'],
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
  },

  plugins: [
    // New moment.js optimization
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity
    }),

    new webpack.optimize.ModuleConcatenationPlugin(),

    new HtmlWebpackPlugin({
      appMountId: 'app-root',
      inlineManifestWebpackName: 'webpackManifest',
      template: 'templateIndex.html',
      title: 'Our Site',
    }),

    new SWPrecacheWebpackPlugin()
  ],

  devServer: {
    historyApiFallback: true,
  },
};

//if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
config.plugins = [
  ...config.plugins,
  new BundleAnalyzerPlugin({analyzerMode: 'static'}),
];
//}

//if (process.env.NODE_ENV === 'production') {
config.output.filename = '[name].[chunkhash].js';
config.plugins = [
  ...config.plugins,
  new webpack.HashedModuleIdsPlugin(),
  new WebpackChunkHash(),
  /*new ChunkManifestPlugin({
    filename: 'chunk-manifest.json',
    manifestVariable: 'webpackManifest',
    inlineManifest: true,
  }),*/
];
//}

module.exports = config;

我的templateIndex.html（我出于同样的原因使用HtmlWebpackPlugin，哈希文件名）服务加载程序加载到正文的末尾。如果我删除它，事情又快了。但灯塔抱怨......

<!doctype html>
<html lang="en">
<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#242424" />

  <title itemprop="name">My Site</title>

  <base href="/">

  <link rel="apple-touch-icon" sizes="57x57" href="/images/favicon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/images/favicon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/images/favicon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/images/favicon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/images/favicon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/images/favicon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/images/favicon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/images/favicon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon-180x180.png">
  <link rel="icon" type="image/png" href="/images/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="/images/favicon-192x192.png" sizes="192x192">
  <link rel="icon" type="image/png" href="/images/favicon-160x160.png" sizes="160x160">
  <link rel="icon" type="image/png" href="/images/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="/images/favicon-16x16.png" sizes="16x16">

  <link type="image/png" href="/images/favicon.png" rel="icon">
  <link rel="icon" href="/images/favicon.ico" />
  <link rel="shortcut icon" href="/images/favicon.png" />
</head>
<body>
  <div id="app"></div>
  <script type="text/javascript">
    // ServiceWorker is a progressive technology. Ignore unsupported browsers
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      }, function(err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
      });
    } else {
      console.log('CLIENT: service worker is not supported.');
    }
  </script>
</body>
</html>

我在Google上搜索过，但是找不到与我遇到的问题有关的任何内容。这是预期的行为吗？因为如果是这样，那么我将不会使用服务加载器。否则，有没有人知道如何让我的页面与服务工作者并行加载？

Answer 1

您很可能在页面的加载事件后注册SW 。目前，当浏览器在HTML脚本标记中执行脚本时，您立即注册SW。注册甚至发生在任何关键应用程序逻辑之前，因为Webpack很可能在关闭正文标记之前插入您的实际JS文件。

更多关于此主题的详细信息和解释！ https://developers.google.com/web/fundamentals/primers/service-workers/registration

HTML5 ServiceWorker大大减慢了页面加载速度

1 个答案: