Webpack 2 "watch" Extremely Slow #1922
Comments
|
I think the unsafe resolve cache was on by default in webpack 1 and is off by default in webpack 2 (need to enable it in the default). Could you try setting btw. your settings |
|
@sokra { externals: {},
eslint:
{ rules:
{
//...lot's of rules
},
configFile: //..path to config file,
formatter: [Function],
emitError: false,
emitWarning: false,
failOnWarning: false,
failOnError: false },
resolve:
{ extensions:
[ '',
'.js',
'.json',
'.jsx',
'.html',
'.css',
'.scss',
'.yaml',
'.yml' ],
modules: [ 'node_modules', 'src/js' ],
alias: {},
unsafeCache: true },
node: { dns: 'mock', net: 'mock', fs: 'empty' },
context: //..path to /src,
cache: true,
debug: true,
entry:
{ main:
[ 'webpack-hot-middleware/client?path=http://localhost:8080/__webpack_hmr&reload=true&noInfo=true',
'babel-polyfill',
'js-cookie',
'query-string',
'./js/index.jsx' ] },
output:
{ path: //..path to dist,
publicPath: 'http://localhost:8080/',
filename: 'js/[name].js' },
module:
{ preLoaders: [ [Object] ],
loaders: [ [Object], [Object], [Object], [Object], [Object], [Object] ],
postLoaders: [ [Object], [Object], [Object] ] },
plugins:
[ OccurrenceOrderPlugin { preferEntry: undefined },
NoErrorsPlugin {},
DefinePlugin { definitions: [Object] },
ExtractTextPlugin { filename: 'css/[name].css', options: [Object], id: 1 },
DedupePlugin {},
Plugin {
options: [Object],
log: [Object],
regular_expressions: [Object],
regularExpressions: [Object] },
HotModuleReplacementPlugin { multiStep: undefined, fullBuildTimeout: 200 } ],
postcss:
[ { [Function]
options: [Object],
info: [Function],
postcssPlugin: 'autoprefixer',
postcssVersion: '5.0.14' } ],
devtool: 'source-map' } |
|
I had time to investigate yesterday. There is a bug which prevents the resolve cache from working. I fixed it locally, but nothing commited yet. Also added some other performance tweaks... I try to publish a new version soon, so you can benchmark it with your usecase. |
|
Could you try again with the most recent version? |
|
For some reason, when This library is using My incremental build times were cut in half, however, which is nice. |
|
@sokra this works great for me, thanks for the fix Still can't get the absolute path working with @ianks |
|
@ianks Auth0 That may be completely unrelated but this seemed very likely to be the problem. If not, sorry for the noise :) |
|
@maoueh 8.2.1 did not fix the issue for me. I ended up just using an |
Works for me... If you have a small repro case I'll take a look. |
|
@sokra are we thinking |
|
@TheLarkInn was working fine for me but I reverted from webpack 2 because of larger bundle sizes #1981 |
|
Closing since confirmed to work again ^. |
|
same here. I want to migrate to Webpack 2. The build speed are initial Unfortunately its closed source, so i can not point to a repository. Has there been any progress or insight regarding build times lately? I also upgraded awesome-typescript-loader from 2.x to 3.0.3 I did try the Dll plugins, but as i remember, it did not help much. However, i have to give it another try tomorrow. This is my config (Webpack 2) "use strict";
let webpack = require("webpack");
let ProgressBarPlugin = require("progress-bar-webpack-plugin");
let config = require("./gulp.config.js");
let isProduction = config.isProduction;
let isTest = false;
module.exports = {
/**
* Developer tool to enhance debugging
* See: https://webpack.js.org/configuration/devtool/
*/
devtool: isProduction ? "hidden-source-map" : isTest ? "inline-source-map" : "cheap-module-source-map",
/**
* The entry point for the bundle.
* See: https://webpack.js.org/configuration/entry-context/
*/
entry: config.frontend.scripts,
/**
* Add additional plugins to the compiler.
* See: https://webpack.js.org/configuration/plugins/
*/
plugins: [].concat(isProduction ? [
/**
* Order the modules and chunks by occurrence.
*/
// new webpack.optimize.OccurenceOrderPlugin(true),
] : []).concat(!isTest ? [
// https://webpack.github.io/docs/code-splitting.html
// https://webpack.js.org/plugins/commons-chunk-plugin/
new webpack.optimize.CommonsChunkPlugin({
name: Object.keys(config.frontend.scripts),
minChunks: Infinity
})
] : []).concat([
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery",
jquery: "jquery",
_: "underscore",
moment: "moment",
Tether: "Tether"
}),
// https://webpack.js.org/plugins/define-plugin/
new webpack.DefinePlugin({
"IS_PRODUCTION": !!config.isProduction
}),
//https://github.com/clessg/progress-bar-webpack-plugin
new ProgressBarPlugin()
]),
/**
* @See: https://webpack.js.org/configuration/module/
*/
module: {
rules: [{
test: /\.ts$/,
// https://github.com/s-panferov/awesome-typescript-loader
loader: "awesome-typescript-loader",
// query: {
// module: "commonjs",
// sourceMap: !isTest,
// inlineSourceMap: isTest,
// forkChecker: true
// }
}, {
test: /\.ts$/,
// https://github.com/brandonroberts/angular2-router-loader
loader: "angular2-router-loader"
}, {
test: /\.ts$/,
// https://github.com/TheLarkInn/angular2-template-loader
loader: "angular2-template-loader"
}, {
test: /\.pug$/,
loader: "pug-loader"
}].concat(!isTest ? [] : [{
test: /\.(js|ts)$/,
enforce: "post",
loader: "istanbul-instrumenter-loader",
include: config.frontend.srcDir,
exclude: [
/\.(e2e|test)\.ts$/,
/node_modules/
]
}])
},
/**
* Cache the generated webpack modules and chunks to improve build speed.
* @See: https://webpack.js.org/configuration/other-options/#cache
*/
cache: true,
/**
* Options affecting the output of the compilation.
* @See: https://webpack.js.org/configuration/output/
*/
output: {
path: config.frontend.outDir,
publicPath: "/",
filename: "[name].js",
sourceMapFilename: "[name].js.map",
chunkFilename: "[id].chunk.js"
},
/**
* These options change how modules are resolved
* @See: https://webpack.js.org/configuration/resolve/
*/
resolve: {
extensions: [".webpack.js", ".web.js", ".ts", ".js"],
},
/**
* Like resolve but for loaders.
* @See: https://webpack.js.org/configuration/resolve/#resolveloader
*/
resolveLoader: {
modules: [
// Unsere loader sind hier
"tools/loaders",
// Standardloader
"web_loaders", "web_modules", "node_loaders", "node_modules"
],
}
}; |
|
Just to let you know. I just went back to the point before i started the webpack upgrade and upgraded only the awesome-typescript-loader. The build time increased from 23 to 40s. |
|
CommonsChunkPlugin config looks weird. |
|
i am getting the numbers down. Had to tweak the awesome typescript loader to get there. so, at-loader looks like this The only webpack related tweak was to use the Dll plugins which saves me about 4-6 seconds.
Here are the numbers no dll, no cache, initial: ~30s with dll, no cache, initial: ~24s with dll, with cache, initial: ~18s |
|
Some findings that I think may be useful, we tried upgrading to Webpack 2.6, but our full build and incremental builds times increased dramatically. Full Build Then we reverted back and I realized that we are not using Since UpdateWent ahead and commented it out in |
|
Just wanted to add, that I am experiencing similar issues after upgrading from 1.x -> 2.6.1. Initial build increased a bit which I don't mind. Incremental build time increased drastically by ~15s. I might note that const excludeFilesRegEx = /node_modules|vendor|localizations|generated/;
const excludeFilesVendorRegEx = /node_modules|localizations|generated/;
module.exports = {
context: path.resolve(__dirname, 'scripts/main'),
entry: {
main: './main',
develop: './develop',
libs: [...]
},
output: {
path: path.resolve(__dirname, 'dist/scripts'),
publicPath: 'scripts/',
filename: '[name].entry.js',
chunkFilename: '[name].chunk.js'
},
externals: {...},
resolve: {
unsafeCache: true,
modules: [
'.',
'node_modules',
path.resolve(__dirname, 'scripts/main')
],
alias: {
// Third party libraries
...
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: [excludeFilesRegEx],
use: [
{
loader: 'babel-loader',
options: {
presets: ['es2015'],
cacheDirectory: true
}
},
{
loader: 'eslint-loader',
options: {
cache: true
}
}
]
},
{
test: /\.ejs$/,
use: [
{
loader: 'ejs-loader',
options: {
escape: /<%[=]([\s\S]+?)%>/g,
interpolate: /<%[=-]([\s\S]+?)%>/g,
evaluate: /<%([\s\S]+?)%>/g
}
}
]
}
],
noParse: [
/photoswipe\/dist\/photoswipe/,
/photoswipe\/dist\/photoswipe-ui-default\.min/,
/moment/,
/momentjs/,
/sinon/,
/chai/
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['libs', 'manifest']
}),
new webpack.DefinePlugin({ IS_DEV: true }),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'root.jQuery': 'jquery',
_: 'underscore',
Backbone: 'backbone',
Marionette: 'marionette',
i18n: 'i18n_manager'
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'template/index.ejs'),
filename: '../index.html',
excludeChunks: ['develop'],
inject: true
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'template/develop.ejs'),
filename: '../develop.html',
excludeChunks: ['main'],
inject: true
})
]
}; |
I'm trying to upgrade to
Webpack 2and have had little problems except the "watch" task and watch done throughwebpack-dev-middlewareare orders of magnitude slower (3 vs 35 seconds). Is there some sort ofoptionI'm missing to speed this up?note: I'm compiling a bunch of
node_modulesfrom es6 from our private NPM if you have a look at theexcluderegex for Babel.Webpack
^1.12.9:Webpack
2.0.4-beta:My config:
The text was updated successfully, but these errors were encountered: