I am getting the following warnings when I run my build-prod. I am not sure how to check what is eating so many resources or how to manage this:
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: app.js (500 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: app (503 KiB) app.css app.js
In my package.json:
"dependencies": {
"babel-polyfill": "^6.26.0",
"body-parser": "^1.19.0",
"express": "^4.17.1",
"firebase": "^7.15.5",
"normalize.css": "^8.0.1",
"nunjucks": "^3.2.1",
"puppeteer": "^5.5.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.6.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.14.1",
"nunjucks-webpack-plugin": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"sass": "^1.26.9",
"sass-loader": "^9.0.1",
"source-map-loader": "^1.1.3",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^3.0.6"
}
In webpack.prod:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'production',
entry: {
polyfill: 'babel-polyfill',
app: './src/client/index.js'
},
output: {
libraryTarget: 'var',
library: 'Client' // All js is accessible through client library - can be any name.
},
optimization: {
minimizer: [new TerserPlugin({}), new OptimizeCssAssetsPlugin({})]
},
module: {
rules: [
{
test: /.js$/,
enforce: 'pre',
use: [
{
loader: 'source-map-loader',
options: {
filterSourceMappingUrl: (url, resourcePath) => {
if (/.*/node_modules/.*/.test(resourcePath)) {
return false
}
return true
}
}
}],
},
{
test: /.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}
]
},
{
test: /.js$/,
enforce: 'pre',
use: ['source-map-loader'],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/client/views/index.html",
filename: "./index.html"
}),
new CleanWebpackPlugin({
// Simulate the removal of files
dry: true,
// Write Logs to Console
verbose: true,
// Automatically remove all unused webpack assets on rebuild
cleanStaleWebpackAssets: true,
protectWebpackAssets: false
}),
new MiniCssExtractPlugin({filename: '[name].css'}),
]
}
In webpack.dev:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
polyfill: 'babel-polyfill',
app: './src/client/index.js'
},
output: {
libraryTarget: 'var',
library: 'Client' // All js is accessible through client library - can be any name.
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /.(css|sass|scss)$/,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass')
}
}
]
},
{
test: /.js$/,
enforce: 'pre',
use: ['source-map-loader'],
}
]
},
stats: {
warningsFilter: [/Failed to parse source map/],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/client/views/index.html",
filename: "./index.html"
}),
new CleanWebpackPlugin({
// Simulate the removal of files
dry: true,
// Write Logs to Console
verbose: true,
// Automatically remove all unused webpack assets on rebuild
cleanStaleWebpackAssets: true,
protectWebpackAssets: false
}),
],
}
Not sure what is going on, is there any command I can use to check how much size each is using?