Впервые создаю многостраничный сайт, до этого делал лендинги. Решил поработать над оптимизацией кода.
В index.html подключаю два js-бандла: main.bundle.min.js, vendor.bundle.min.js.
В vendor.bundle.min.js лежит вендорный код из node_modules (plugin-1.js, plugin-2.js, plugin-3.js и т.д.) и код из папки files(сторонние плагины, которые нельзя установить через npm), а в main.bundle.min.js находится мой кастомный код + объявление плагинов с их настройками. Все работает отлично.
Как быть с другими страницами? Если к примеру на странице about.html мне не нужен plugin-2.js(и объявление этого плагина с его настройками из main.bundle.min.js), но нужны plugin-1.js и plugin-3.js из vendor.bundle.min.js. Что нужно сделать что бы не загружать лишний код? Прикрепил данные из моего webpack.config.js.
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
mode: "production",
optimization: {
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendorJS: {
name: 'vendor',
test: /[\\/]node_modules[\\/]|files[\\/]/,
chunks: 'all',
enforce: true,
},
vendorCSS: {
name: 'vendor',
type: 'css/mini-extract',
chunks: 'all',
enforce: true,
},
}
},
minimizer: [
new TerserPlugin({
terserOptions: {
format: {
comments: false,
},
},
extractComments: false,
}),
new CssMinimizerPlugin(),
]
},
output: {
filename: '[name].bundle.min.js',
chunkFilename: '[name].bundle.min.js',
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
}
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif|woff|woff2|eot|ttf|)$/i,
use: {
loader: 'file-loader',
options: {
name: "[name].[ext]",
outputPath: "../fonts/webfonts",
}
}
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "../css/[name].min.css",
}),
],
};
Средний
Простой
Простой
