Webpack CPU Profiles #5
Comments
|
@alexander-akait: Added config and versions. Do you need anything else? |
|
Which branch should I use? And here we already working webpack/webpack#12516 😄 |
|
Sorry, I don't have repro for this since it requires publishing the complete source code on a third party service. Not sure I'm allowed to do that to be honest. I could maybe do a dumbed down version, but that would have so little code that it would build in an instant anyway. |
|
Thanks for profiles, can you try to disable |
|
I've done that already. I disabled all unnecessary stuff when I measured the build times in webpack/webpack#12475. |
|
No need, thanks |
|
Total build time for all our libs and apps are up from ~2min 20s -> ~3min 10s |
|
|
|
Try to disable check types and look how it reduce build time |
|
@alexander-akait I can play around with that tomorrow. But does that explain the difference between 4 and 5? I do TypeCheck in both. |
|
webpack@5 do more stuff, unfortunately it's hard to say what exactly is regression without code, maybe you have some edge cases |
|
Ah, I see. Yeah, creating a repro would probably remove the "bug". And showing the complete codebase will probably not be possible or make sense to you. Hopefully enough people can post CPU profiles until you find a pattern. We have upgraded now anyway, but I hope the build times goes down in the future. Thanks for looking. |
|
@JonWallsten webpack/webpack#12557 can help to you in future, just want to clarify cache is working? |
|
@alexander-akait I had some issue yesterday which might have something to do with the cache. It complained about some hash thingy in a file called crypto something. I didn't save the log though. Haha, I just checked the terminal to see if I still had the error, and luckily enough the same issue just happened and crashed by build process. Probably happened when I switched branch in git. Might be unrelated though, but have never seen the message before turning on cache. |
|
Interesting... Can you try to add |
|
Sure! It might take a day or so to reproduce though. I'll just wait until it happens again. |
|
What exactly do we need to find out? I just noticed the log says data is |
|
Maybe hook where it happens, I think you can get it here |
I'll try! I'll log out whenever data is undefined and see what we get on the hook! pun intended |
|
@alexander-akait |
|
Logs are in place for the other issue. |
|
You have error in |
|
Yeah, it's probably because I renamed a file which is then imported in a bunch of different files, so they probably temporarily had the wrong path. Maybe the error message could be made a little bit nicer, it looks like something is seriously wrong. But it will obviously fix itself after the next rebuilds when the branch switch is stable. |
|
@JonWallsten You have something wrong with your output (what is the value for |
|
Let me try to reproduce the issue. Hold on. |
|
We're also seing this for half the team but not the rest of it: Can't find any issue or Stackoverflow for it. I've asked them to clear node_modules and install everything again, but the error persists. Any idea? |
|
You have old version of |
|
Hmm, that's the thing, we all have the same |
|
Please install |
|
I'll do! Thanks! |
|
@alexander-akait: Found some more cache issues after switching branch and then rebase on master. I had to clean the cache folder for it to work again. For reference this is my 'files' list: Normally I clean the cache between each cold start. But wanted to test if we could save time since I restart from a few times every day due to various issue. |
|
@JonWallsten You need to open an issue in |
|
@alexander-akait: Quick question, answer if you have time, would really appreciate it! :) We're using Webpack to build our monorepo. We have a few libraries; core, common and angular, and a few applications. We have Thank you and have a great weekend! |
Yes, but we are working on it right now |
Perfect! Then we won't do anything until that's done! |
|
@JonWallsten But to be honestly recommend do not bundle library and keep them in ES modules format, it will be faster and more advanced and simple |
|
@alexander-akait I trust you. We are discussing about skipping bundling, it's not really necessary, or keep both the source files and a bundle for compobility. Is that possible in Webpack today? Do you have any example lib that uses Webpack that does this? Thanks! A note to this is that we're using TypeScript, so everything is a bit more complicated with sourcemaps, type declaration and type declaration maps. |
|
You don't need webpack here, just write ES module syntax code 🛩️ If you use ts, you can setup it in |
|
Ah, that's true. The only downside I can think of is the handling on resources (images/css/fonts) etc. But we can probably solve that somehow. |
|
|
|
I double checked, we don't have any resources that I could find. So that's not an issue. import { Configuration, DefinePlugin } from 'webpack';
import * as helpers from './helpers';
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
/**
* Webpack Plugins
*/
import { projectRootPath } from '../../../build-tools/helpers';
export interface IWebpackOptions {
env?: string;
}
/**
* Webpack configuration
*
* See: http://webpack.github.io/docs/configuration.html#cli
*/
export default (options: IWebpackOptions) => {
const isProd: boolean = options.env === 'production';
const config: Configuration = {
/**
* CAUTION:
* web-app-wui must be built using legacy ES5, e.g. no arrow functions and classes (ES6+),
* since we still need to support IE11 for Catia/Enovia (MMT1-29082)
*/
target: ['web', 'es5'],
output: {
path: helpers.rootPath('dist'),
filename: '[name].js',
libraryTarget: 'umd',
globalObject: 'this'
},
/**
* The entry point for the bundle
* Our Angular.js app
*
* See: http://webpack.github.io/docs/configuration.html#entry
*/
entry: {
'index': './src/index.ts'
},
/**
* Options affecting the resolving of modules.
*
* See: http://webpack.github.io/docs/configuration.html#resolve
*/
resolve: {
/**
* An array of extensions that should be used to resolve modules.
*
* See: http://webpack.github.io/docs/configuration.html#resolve-extensions
*/
extensions: ['.ts', '.js'],
/**
* An array of directory names to be resolved to the current directory
*/
modules: [
helpers.rootPath('src'),
helpers.rootPath('node_modules'),
projectRootPath('node_modules')
],
fallback: {
'https': require.resolve('https-browserify'),
'http': false,
'process': require.resolve('process/browser')
}
},
// When using external packages
externals: /^(lodash|axios)$/i,
/**
* Options affecting the normal modules.
*
* See: http://webpack.github.io/docs/configuration.html#module
*/
module: {
rules: [
/**
* Optimises lodash import to allow syntax "import { name } from 'lodash'" instead of
* import * as name from 'lodash/name'
*
*/
{
test: /\.ts$/,
loader: 'lodash-ts-imports-loader',
include: helpers.include,
enforce: 'pre'
}
]
},
/**
* Add additional plugins to the compiler.
*
* See: http://webpack.github.io/docs/configuration.html#plugins
*/
plugins: [
/**
* Plugin: DefinePlugin
* Description: Define free variables.
* Useful for having development builds with debug logging or adding global constants.
*
* Environment helpers
*
* See: https://webpack.js.org/plugins/define-plugin/#root
*/
// NOTE: when adding more properties make sure you include them in typings/global.d.ts
new DefinePlugin({
IS_PROD: isProd,
IS_DEV: !isProd,
DEV_SERVER_URL: JSON.stringify('https://l4124t.sss.se.scania.com/oas/utils/')
}),
new ForkTsCheckerWebpackPlugin()
]
};
return config;
};The lodash thing is not really important. But DefinePlugin and fallback are things we are using. |
|
Hm, I see, let's wait the |
|
Thanks for your time! We'll investigate in our team :) |
Single production build
Webpack 5
Versions
webpack: 5.18.0
webpack-cli: 4.4.0
node: 14.15.4
windows: 10.1809
Script
node --max_old_space_size=8192 ../../node_modules/webpack/bin/webpack.js "--config" "config/webpack.prod.ts"Config
Profile
events_webpack_5.18.0.zip
Webpack 4
Versions
webpack: 4.44.1
webpack-cli: 3.3.12
node: 14.15.4
windows: 10.1809
Script:
node --max_old_space_size=8192 ../../node_modules/webpack/bin/webpack.js "--config" "config/webpack.prod.ts" "--display" "errors-only" "--display-error-details"Config
Profile
events_webpack_4.44.1.zip
More info:
webpack/webpack#12475
The text was updated successfully, but these errors were encountered: