Webpack: development и production environment
За момента имаме само dev
script, който да транспилира кода. При празен src/js/functions.js
обаче, изходния dist/functions.bundle.js
е 5KB. Това е защото включва стартов код, който после ще ни трябва за зареждане на библиотеки.
Ще е добре да го оптимизираме.
Първото, което ще направим е да добавим в package.json
и следния script:
"build": "webpack --mode=production"
Имаме напредък – при изпълнение на npm run build
файлът вече е 1 KB. Това е защото преди имахме множество коментари, които вече са напълно премахнати.
Нека оптимизираме кода още повече.
Минифициране
Нека инсталираме:
npm install uglifyjs-webpack-plugin --save-dev
След това да го заредим в webpack.config.js
:
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: [
path.resolve('./src/js/functions.js'),
path.resolve('./src/scss/style.scss')
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'functions.bundle.js'
},
module: {
rules: [
{
exclude: /node_modules/,
test: /\.js$/,
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
compact: true
}
},
{
exclude: /node_modules/,
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader'
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.bundle.css'
})
],
optimization: {
minimizer: [new UglifyJsPlugin({
test: /\.js$/
})]
}
};
Зареждаме const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
още в началото на файла. Накрая добавяме и optimization
property към настройките, където описваме минификатор.
Това няма да намали размера на текущия ни JS файл, тъй като нямаме собствен код. Но добавяйки код във src/js/functions.js
той вече ще бъде минифициран и bundle файлът ще остане възможно най-малък.