帶有BrowserSync的Webpack重新加載非常緩慢

Question

我通常開發React應用程序，但是由於一些客戶的擔憂，我不得不在Wordpress上為其開發一個網站。 該站點有一些非常動態的部分，因此我決定實施webpack，以便沿途享受現代框架的一些奢華。 而且效果很好。 除了完成BrowserSync實時重新加載可能需要10秒鍾的事實以外。

當然，我是webpack的新手，所以我確定我缺少什么。 我知道過去使用React時，我已經將webpack-dev-server與HMR一起使用了。 在這里，我使用的是本教程的BrowserSync： https : //www.kirstencassidy.com/incorporting-webpack-wordpress-theme-part-2/

我已經實現了諸如hardsource插件和cache-loader之類的東西，以試圖加快速度。 而且我遵循了這里提供的建議： BrowserSync與IPv6代理並向/ etc / hosts添加:: 1 [site] .com.test條目非常慢 。 但是似乎沒有什么可以幫助加快速度。

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站點的熱重載代理到本地主機，但是我不記得_.com.dev花費這么長時間進行重載（不能由於Google聲稱擁有TLD，因此不再使用.dev）。

這樣就可以解決所有的^^^問題，但是如果有人對ACTUAL問題有任何建議，仍然可以感謝您的回答:)