@RIBAdminio
немного Системный, немного программист.

Как оптимизировать работу pug компилятора?

Добрый день.
Верстаю сайты используя webpack, с препроцессорами scss и pug.
Компиляция scss файлов всегда происходит быстро, вне зависимости от размера проекта.
Но если приходится компилировать pug файлы, то скорость компиляции будет зависеть от размера проекта.
Если pug файлов мало, то компиляция пройдёт быстро, если количество pug файлов переваливает за сотню, то компиляция может идти пол минуты или даже больше.
Складывается впечатление, что scss компилятор компилирует только те данные, которые я изменил, в то время, как pug компилятор компилирует все файлы проекта, и это не зависит от того, что и где я изменил.

Подскажите, как можно это оптимизировать и заставить pug компилятор компилировать только изменённые данные?

конфигурация webpack

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 компилятора в webpack конфиге

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



конфигурация scss компилятора в webpack конфиге

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,
							}
						},
					]
				}
			]
		}
	};
};

  • Вопрос задан
  • 126 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы