Добрый день! Подскажите пожалуйста как можно еще уменьшить бандл вебпака?
После перехода на webpack 4, бандл увеличился на пару килобайт, а должен был уменьшиться.
На данный момент webpack выдает такие предупреждения
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
./fonts/Caramel-Regular.ttf (457 KiB)
main-6396c.css (414 KiB)
main-6396fc.js (2.23 MiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (3.04 MiB)
main-6396fc.css
main-6396fc.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
Скажите пожалуйста, как можно их исправить и что можно еще сделать, чтобы минимизировать сам бандл?
Конфиг webpack-а
const cssA = cssnano({
autoprefixer: {
add: true,
remove: true,
},
discardComments: {
removeAll: true,
},
discardDuplicates: true,
reduceIdents: false,
safe: true,
sourcemap: true,
});
module.exports = merge(require('./webpack.def.config'), {
mode: 'production',
devtool: 'source-map',
module: {
rules: [{
test: /\.(s?css|sass)$/,
exclude: /app[\\/](components|scenes)[\\/].+\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins() {
return [cssnanoSetup];
},
},
},
{
loader: 'sass-loader',
options: {
includePaths: ['./node_modules'],
},
},
],
}, {
test: /app[\\/](components|scenes)[\\/].+\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
localIdentName: '[local]___[hash:base64:4]',
},
},
{
loader: 'postcss-loader',
options: {
plugins() {
return [cssA];
},
},
},
{
loader: 'sass-loader',
options: {
includePaths: ['./node_modules'],
},
},
],
}],
},
optimization: {
minimize: true,
minimizer: [
new UglifyJSPlugin({
sourceMap: true,
uglifyOptions: {
compress: {
unused: false,
dead_code: false,
warnings: true,
join_vars: true,
drop_console: true,
comparisons: true,
loops: true,
drop_debugger: true,
},
output: {
comments: false,
},
},
}),
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'main-[hash:5].css',
chunkFilename: 'main-[hash:5].css',
allChunks: true,
}),
],
});
Буду благодарен за любую помощь!
