Answer the question
In order to leave comments, you need to log in
How to optimize pug compiler performance?
Good afternoon.
I build websites using webpack, with scss and pug preprocessors.
Compiling scss files is always fast, regardless of the size of the project.
But if you have to compile pug files, then the compilation speed will depend on the size of the project.
If there are few pug files, then compilation will be fast, if the number of pug files exceeds a hundred, then compilation can take half a minute or even more.
It seems that the scss compiler compiles only the data that I changed, while the pug compiler compiles all project files, and this does not depend on what and where I changed.
Tell me, how can I optimize this and make the pug compiler compile only changed data?
const path = require ('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const pug = require ('./webpack/pug');
const devserver = require('./webpack/devserver');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const sass = require('./webpack/sass');
const css = require('./webpack/css');
const extractCss = require('./webpack/css.extract');
const images = require('./webpack/images');
const files = require('./webpack/files');
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const copy = require('copy-webpack-plugin');
const PATHS = {
source: path.join(__dirname, 'source'),
build: path.join(__dirname, 'build')
};
const common= merge([
{
mode:'',
entry: {
'index': PATHS.source + '/pages/index/index.js',
},
output: {
path: PATHS.build,
publicPath: '',
filename: 'js/[name].js'
},
resolve:{
alias: {
'@': path.resolve(__dirname,'source'),
}
},
plugins:[
new HtmlWebpackPlugin({
filename:'index.html',
chunks: ['index', 'common'],
template: PATHS.source + '/pages/index/index.pug',
scriptLoading: 'defer',
}),
new MiniCssExtractPlugin(),
new OptimizeCssAssetsPlugin(),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
],
optimization:{
splitChunks:{
chunks: 'all',
name: 'common'
}
},
devtool:'',
},
pug(),
images(),
files()
]);
module.exports = function(env){
common.mode = env;
if (env === 'production'){
common.devtool = false;
return merge([
{
plugins:[
new CleanWebpackPlugin(),
]
},
common,
extractCss(),
])
}
if (env === 'development'){
common.devtool = 'eveal-sourcemap';//Будет создаваться сорсмап
return merge([
common,
devserver(),
sass(),
css()
])
}
};
const path = require('path');
module.exports = function(){
return {
module:{
rules: [
{
test: /\.pug$/,
loader:'pug-loader',//настраиваем pug-loader
options:{
pretty: true
}
}
]
}
}
}
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = function(paths){
return {
module: {
rules: [
{
test: /\.scss$/,
//include: paths,
use: [
{
loader: MiniCssExtractPlugin.loader,
options:{
sourceMap: true,
}
},
{
loader: 'css-loader',
options:{
sourceMap: true,
}
},
{
loader: 'sass-loader',
options:{
sourceMap: true,
}
},
]
}
]
}
};
};
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question