Now you just have to go through the stats and figure out what you can remove to make your bundle.js smaller. Then upload stats.json to the webpack analyzer tool: (or alternatively, use this command line npm module: webpack-bundle-size-analyzer). Generate the build stats with webpack: webpack -production -json > stats.json # Second: Analyze what is taking up the space This line will set TARGET to "build" if you are using either the -production flag, the shorthand -p flag, or building through npm run build. npm_lifecycle_event = 'build' ) ) ? 'build' : 'start' indexOf ( '-production' ) > 0 ) || (process. # Solution 2: Detect the -production flag when using webpackĪdditionally, you can also modify your file to detect the -production flag.įor example: const TARGET = ( (process. Note: The -optimize-minimize flag is optional, it will minimize your scripts (and your css) using the UglifyJs plugin (saving up more space!). įor this to work, you need to define a script called "build" inside your package.json file and then run webpack through npm run build (not just "npm build", as it has another meaning than "npm run build").Įxample of package.json: //. webpack-bundle-analyzer, is a super useful tool to discover issues with bundling and to help you quickly figure out what to focus on in order to improve the situation. _lifecycle_event is only set when you are running webpack through npm run. If your contains a line like const TARGET = _lifecycle_event, your problem is probably there. Many examples are using _lifecycle_event to detect if it's a development build or a production build. Load the statistics json file and the analysis is performed.Is the output file generated by webpack too large? Two things to check out. gitignore Webpack Visualizerĭrag and drop the statistics json file and a graph will be produced showing usage by module. These files are used to create the analysis in a separate browser window. Which creates files statistics.json for development mode and production-statistics.json for production mode. "production-statistics": "rm -rf dist & NODE_ENV=production webpack -mode production -profile -json > production-statistics.json & webpack-bundle-analyzer production-statistics.json dist", Webpack Bundle Analyzer Install npm i -save-dev webpack-bundle-analyzerĪdd to package.json scripts "statistics": "webpack -mode development -profile -json > statistics.json & webpack-bundle-analyzer statistics.json dist" This stuff ends up sprayed everywhere, so let's create a reference document.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2022
Categories |