G
G
George2021-12-20 09:50:53
Pug
George, 2021-12-20 09:50:53

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?

webpack configuration

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()
    ])
  }
};



pug compiler configuration in webpack config

const path = require('path');
module.exports = function(){
  return {
    module:{
      rules: [
        {
          test: /\.pug$/,
          loader:'pug-loader',//настраиваем pug-loader
          options:{
            pretty: true
          }
        }
      ]
    }
  }
}



scss compiler configuration in webpack config

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 question

Ask a Question

731 491 924 answers to any question