Webpack与BrowserSync重新加载非常缓慢

Question

我通常开发React应用程序，但由于一些客户关注，我不得不在Wordpress上为他们开发一个网站。该网站有一些非常动态的部分，所以我决定实施webpack，以便在此过程中享受现代框架的一些奢侈品。它工作得很好。除了完成BrowserSync实时重新加载可能需要大约10秒的事实。

当然，我是webpack的新手，所以我确定我错过了一些东西。我知道在过去的React中我使用了带有HMR的webpack-dev-server。在这里，我使用的是BrowserSync，这是一个教程：https://www.kirstencassidy.com/incorporting-webpack-wordpress-theme-part-2/

我已经实现了像hardsource plugin和cache-loader之类的东西来试图加快速度。我遵循了这里提供的建议：BrowserSync extremely slow与IPv6代理有关，并将:: 1 [site] .com.test条目添加到/ etc / hosts。但似乎没有什么能帮助加快速度。

webpack.config.js：

const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const HardsourceWebpackPlugin = require('hard-source-webpack-plugin')
const config = require('./config')

module.exports = function(env) {
  return  {
    entry: {
      main: "./js/index.js",
      home: "./js/components/pages/home.js",
      connect: "./js/components/pages/connect/index.js",
      learn: "./js/components/pages/learn/index.js",
      community: "./js/components/pages/learn/community.js",
      founders: "./js/components/pages/learn/founders.js"
    },
    output: {
      path: path.resolve(__dirname + "/dist"),
      filename: "[name].bundle.js"
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            {
              loader: "cache-loader"
            },
            {
              loader: "babel-loader",
              options: {
                presets: ["env"]
              }
            }
          ]
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: "cache-loader"
            },
            {
              loader: "raw-loader"
            }
          ],
          exclude: /node_modules/
        },
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [
              {
                loader: "cache-loader"
              },
              {
                loader: "css-loader"
              },
              {
                loader: "sass-loader"
              }
            ]
          }),
          exclude: /node_modules/
        },
        {
          test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)/,
          loader: 'url-loader',
          exclude: /node_modules/
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ],
          exclude: /node_modules/
        }
      ]
    },
    devServer: {
      historyApiFallback: true,
      compress: true,
      port: 3001,
      https: config.url.indexOf('https') > -1 ? true : false,
      publicPath: config.fullPath,
      proxy: {
        '*': {
          'target': config.url,
          'secure': false
        },
        '/': {
          target: config.url,
          secure: false
        }
      }
    },
    plugins: [
      new HardsourceWebpackPlugin(),
      new ExtractTextPlugin({
        filename: 'styles/[name].css',
        allChunks: true
      }),
      new webpack.optimize.CommonsChunkPlugin({
        name: 'common'
      }),
      // new UglifyJsPlugin({
      //   sourceMap: true,
      //   uglifyOptions: {
      //     ie8: false,
      //     ecma: 8,
      //     mangle: true,
      //     output: {
      //       comments: false,
      //       beautify: false
      //     },
      //     warnings: false
      //   }
      // }),
      new BrowserSyncPlugin({
        proxy: config.url,
        files: [
          '**/*.php'
        ],
        reloadDelay: 0,
        online: true
      })
    ]
  }
}

config.js：

module.exports = {
  url: 'http://fakewebsite.com.test/',
  themeDir: '/wp-content/themes/CGO/',
  fullPath: 'http://fakewebsite.com.test/wp-content/themes/CGO/',
  ip: '127.0.0.1'
}

这里是cli日志的屏幕截图，如果这给了任何人一些线索：

任何线索我可能做错了什么？我该怎么做才能加快webpack的性能？是不是因为我一次编译了这么多scss / js文件？实时重载是很好的，但是当快速迭代时，10秒间隔真的很烦人。

Answer 1

似乎经过多次尝试和变量隔离后，这实际上是某种DNS查找延迟问题，而不是webpack。这很奇怪，因为这是我第一次尝试将热重装从_.com.test网站代理到localhost，但我不记得_.com.dev曾经服用过这么长时间才能重新加载（由于google声称tld，因此无法使用.dev）。

所以这解决了所有^^^，但如果有人对ACTUAL问题有任何提示，答案仍然赞赏：）