Fatal编程技术网
  • javascript/
  • Javascript HTML5 ServiceWorker大大降低了页面加载速度

Javascript HTML5 ServiceWorker大大降低了页面加载速度

javascript html webpack

Javascript HTML5 ServiceWorker大大降低了页面加载速度,javascript,html,webpack,service-worker,Javascript,Html,Webpack,Service Worker,我正在使用谷歌灯塔（GoogleLighthouse）找出加快页面加载速度的方法 其中一个红点是我失去了一名服务人员。 所以我有一个工作 在我使用服务人员之前，我的页面已完全加载，并在7秒内准备就绪。 在我添加服务人员后，我的页面在29秒内完全加载 当我检查Fiddler正在进行时，看起来服务人员正在加载所有文件，然后才让页面呈现 我正在使用webpack.config中的swebpackplugin插件自动生成service-worker.js文件，因为我的库名称会自动散列以优化缓存 这是我的

我正在使用谷歌灯塔（GoogleLighthouse）找出加快页面加载速度的方法

其中一个红点是我失去了一名服务人员。 所以我有一个工作

在我使用服务人员之前，我的页面已完全加载，并在7秒内准备就绪。 在我添加服务人员后，我的页面在29秒内完全加载

当我检查Fiddler正在进行时，看起来服务人员正在加载所有文件，然后才让页面呈现

我正在使用webpack.config中的swebpackplugin插件自动生成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>


我的网站
//ServiceWorker是一项进步的技术。忽略不支持的浏览器
if（导航器中的“serviceWorker”）{
navigator.serviceWorker.register（'/service worker.js'）。然后（函数（注册）{
//注册成功
console.log（'ServiceWorker注册成功，作用域：'，registration.scope）；
}，函数（err）{
//注册失败：(
console.log（'ServiceWorker注册失败：'，错误）；
});
}否则{
log（'CLIENT:service worker不受支持'）；
}
我在谷歌上搜索过，但找不到任何与我所经历的问题相关的东西。 这是预期的行为吗？因为如果是这样，那么我将不使用服务加载器。
否则，有人知道如何让我的页面与服务人员并行加载吗？

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

更多关于这个主题的详细信息和解释！