如何提高建筑速度Webpack，Pug，SCSS？

问题描述

我有个大项目。我使用Pug构建HTML，使用SASS构建样式。 我的项目包含包含include和mixins的35页。 还有其他基本内容，例如图像，样式和脚本。 以开发模式进行初始构建需要10分钟。制作中-6分钟。

我认为它太慢了。

如何提高建筑速度？是否可以使Webpack更快地构建Pug？

Speed Measure log screenshot

Webpack配置：

const path = require("path");
const webpack = require("webpack");
const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const SpriteLoaderPlugin = require("svg-sprite-loader/plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
const TerserJSPlugin = require("terser-webpack-plugin");
const copyWebpackPlugin = require("copy-webpack-plugin");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const paths = {
  src: path.resolve(__dirname,"src"),build: path.resolve(__dirname,"build"),};

const smp = new SpeedMeasurePlugin();

module.exports = (env,argv) => {
  return smp.wrap({
    entry: {
      index: "./src/index.js",},output: {
      path: paths.build,filename: "[name].[hash].js",optimization: {
      minimize: argv.mode !== "development",minimizer: [
        new TerserJSPlugin({
          cache: true,parallel: true,}),],splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/].*\.js$/,filename: "vendor.[hash].js",chunks: "all",resolve: {
      alias: {
        "@": paths.src,module: {
      rules: [
        {
          test: require.resolve("jquery"),use: [
            {
              loader: "expose-loader",options: {
                exposes: ["$","jQuery"],{
          test: /\.js$/,exclude: /node_modules/,use: [
            {
              loader: "cache-loader",{
              loader: "thread-loader",{
              loader: "babel-loader",options: {
                presets: ["@babel/preset-env"],{
          test: /\.pug$/,use: [
            {
              loader: "pug-loader",options: {
                pretty: argv.mode !== "development",{
          test: /\.scss$/,use: [
            argv.mode === "development"
              ? {
                  loader: "style-loader",}
              : {
                  loader: MiniCssExtractPlugin.loader,options: {
                    publicPath: "../","css-loader","postcss-loader","fast-sass-loader",{
          test: /\.svg$/,include: /icons/,use: [
            {
              loader: "svg-sprite-loader",options: {
                runtimeCompat: true,"svg-transform-loader","svgo-loader",{
          test: /\.(gif|png|jpe?g)$/i,include: /ill/,use: [
            {
              loader: "responsive-loader",options: {
                name: "[name]-[width].[ext]",outputPath: "images",{
              loader: "image-webpack-loader",options: {
                mozjpeg: {
                  progressive: true,quality: 65,optipng: {
                  enabled: false,pngquant: {
                  quality: [0.8,1],gifsicle: {
                  interlaced: false,{
          test: /\.(svg)$/i,use: [
            {
              loader: "file-loader",options: {
                name: "[name].[ext]",{
          test: /\.(eot|ttf|woff|woff2)$/,options: {
                name: "fonts/[name].[ext]",{
          test: /\.(mp4)$/,options: {
                name: "video/[name].[ext]",plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",jQuery: "jquery","window.jQuery": "jquery",new MiniCssExtractPlugin({
        filename: "./css/[name].[hash].css",chunkFilename: "[name].[hash].css",new SpriteLoaderPlugin({
        plainsprite: true,new copyWebpackPlugin({
        patterns: [
          {
            from: "static",to: "static",new CleanWebpackPlugin({
        dry: true,cleanOnceBeforeBuildPatterns: ["build/*"],new DuplicatePackageCheckerPlugin(),...fs
        .readdirsync(path.resolve(__dirname,"src/template/pages"))
        .filter((fileName) =>
          fileName.endsWith(".pug") && env !== undefined && env.pages.length
            ? env.pages.split(",").includes(fileName)
            : true
        )
        .map(
          (page) =>
            new HtmlWebpackPlugin({
              minify: false,template: `${paths.src}/template/pages/${page}`,filename: `./${page.replace(/\.pug/,".html")}`,})
        ),devServer: {
      watchOptions: {
        ignored: /node_modules/,hot: true,port: process.env.PORT,overlay: {
        errors: false,warnings: false,});
};

P.S。我的堆栈适合这样的大型项目吗？

预先感谢您的回答。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）