Javascript 监视模式下的网页包在更改后构建时间过长（~23秒）

保存更改后，webpack构建平均需要约23秒。这是构建时的输出。在完成之前，它将一直运行到6695个模块

18% building 915/944 modules 29 active ...terial-ui/icons/esm/WallpaperTwoTone.js

如何加快构建时间？任何帮助都将不胜感激

• 节点：11.6
• 网页：^4.29.6

webpack.common.js：

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const ConcatPlugin = require('webpack-concat-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HappyPack = require('happypack');
// const HtmlWebpackPlugin = require('html-webpack-plugin')

const plugins = [
  new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[name].css',
  }),
  new HappyPack({
    id: 'html',
    threads: 1,
    loaders: ['html-loader']
  }),
  new HappyPack({
    id: 'js',
    threads: 1,
    verbose: false,
    debug: false,
    loaders: ['babel-loader?cacheDirectory']
  }),
  new HappyPack({
    id: 'css',
    threads: 1,
    loaders: ['css-loader']
  }),
  new HappyPack({
    id: 'less',
    threads: 1,
    loaders: ['css-loader', 'less-loader']
  }),
  new ConcatPlugin({
    sourceMap: false,
    outputPath: 'css',
    fileName: 'framework.css',
    filesToConcat: [
      './node_modules/bootstrap/dist/css/bootstrap.css',
      './node_modules/material-design-icons-iconfont/dist/material-design-icons.css',
      './node_modules/ui-select/dist/select.min.css',
      './node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp.css',
      './node_modules/angular-loading-bar/build/loading-bar.css',
      './node_modules/typeface-roboto/index.css'
    ],
    attributes: {
      async: true
    }
  }),
  new ConcatPlugin({
      sourceMap: false,
      outputPath: 'js',
      fileName: 'angular.bundle.min.js',
      filesToConcat: [
        './node_modules/jquery/dist/jquery.js',
        './node_modules/angular/angular.js',
        './node_modules/angular-route/angular-route.min.js',
        './node_modules/angular-cookies/angular-cookies.min.js',
        './node_modules/angular-resource/angular-resource.min.js',
        './node_modules/angular-sanitize/angular-sanitize.min.js',
        './node_modules/angular-animate/angular-animate.min.js',
        './node_modules/bootstrap/dist/js/bootstrap.js'
      ],
      attributes: {
        async: true
      }
    }),
    new ConcatPlugin({
      sourceMap: false,
      outputPath: 'js',
      fileName: 'lib.js',
      filesToConcat: [
        './node_modules/ui-select/dist/select.min.js',
        './node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',
        './node_modules/angular-ui-mask/dist/mask.min.js',
        './node_modules/angular-ui-indeterminate/dist/indeterminate.min.js',
        './node_modules/angular-ui-event/dist/event.min.js',
        './node_modules/angular-ui-validate/dist/validate.min.js',
        './node_modules/angular-ui-uploader/dist/uploader.min.js',
        './node_modules/angular-input-masks/releases/angular-input-masks-standalone.js',
        './node_modules/angular-file-saver/dist/angular-file-saver.bundle.js',
        './node_modules/angular-loading-bar/build/loading-bar.js',
        './node_modules/angular-pageslide-directive/dist/angular-pageslide-directive.js',
        './node_modules/ng-idle/angular-idle.js'
      ],
      attributes: {
        async: true
      }
    }),
    new CopyPlugin([
      {
        from: './node_modules/bootstrap/dist/fonts/*',
        to: path.resolve(__dirname, '..', 'webapp', 'WEB-INF', 'static', 'build', 'fonts'),
        flatten: true
      },
      {
        from: './node_modules/material-design-icons-iconfont/dist/fonts/*',
        to: path.resolve(__dirname, '..', 'webapp', 'WEB-INF', 'static', 'build', 'css', 'fonts'),
        flatten: true
      },
      {
        from: './node_modules/typeface-roboto/files/*',
        to: path.resolve(__dirname, '..', 'webapp', 'WEB-INF', 'static', 'build', 'css', 'files'),
        flatten: true
      },
      {
        from: './static_files/img/*.svg',
        to: path.resolve(__dirname, '..', 'webapp', 'WEB-INF', 'static', 'build', 'img'),
        flatten: true
      },
      {
        from: './static_files/img/*.ico',
        to: path.resolve(__dirname, '..', 'webapp', 'WEB-INF', 'static'),
        flatten: true
      },
      {
        from: './static_files/pdf',
        to: path.resolve(__dirname, '..', 'webapp', 'WEB-INF', 'static', 'pdf'),
        flatten: true
      },
      {
        from: './static_files/fonts',
        to: path.resolve(__dirname, '..', 'webapp', 'WEB-INF', 'static', 'fonts'),
        flatten: true
      }
    ])
];

const rules = [
  {
    test: /\.html$/,
    loader: 'happypack/loader?id=html',
    exclude: /node_modules/
  },
  {
    test: /\.svg$/,
    loader: 'svg-url-loader',
    options: {
      iesafe: true
    }
  },
  {
    test: /\.css$/,
    use: [MiniCssExtractPlugin.loader, 'happypack/loader?id=css']
  },
  {
    test: /\.less$/,
    use: [MiniCssExtractPlugin.loader, 'happypack/loader?id=less']
  },
  {
    test: /\.(png|woff|woff2|eot|ttf)$/,
    loader: 'url-loader?limit=100000'
  },
  {
    test: /\.(ts|tsx)?$/,
    include: [
      path.resolve(__dirname, 'js'),
      path.resolve(__dirname, 'node_modules/array-move')
    ],
    exclude: /e2e/,
    use: [
      {
        loader: 'happypack/loader?id=js'
      },
      {
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
          experimentalWatchApi: true,
        }
      },
      {
        loader: 'tslint-loader',
        options: {
          emitErrors: true,
          formatter: 'codeFrame'
        }
      },
    ],
    enforce: 'pre'
  },
  {
    test: /\.m?jsx?$/,
    include: [
        path.resolve(__dirname, 'js'),
        path.resolve(__dirname, 'node_modules/array-move')
    ],
    exclude: /e2e/,
    loader: 'happypack/loader?id=js'
  }
];

module.exports = {
  devtool: 'source-map',
  cache: false,
  parallelism: 30,
  context: path.resolve(__dirname, ''),

  entry: {
    main: ['@babel/polyfill', './js/app.ts']
  },

  output: {
    path: path.resolve(__dirname, '..', 'webapp', 'WEB-INF', 'static', 'build'),
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    sourceMapFilename: '[name].bundle.js.map'
  },

  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 1,
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "initial"
        },
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        }
      }
    }
  },

  module: {
    rules: rules
  },

  stats: {
    colors: true
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.js', 'jsx', '.css', '.less']
  },

  externals: {
    angular: 'angular'
  },

  performance: {
    hints: false
  },

  plugins: plugins
};

wepback.dev.js：

const merge = require('webpack-merge');
const commonConfig = require('./webpack.common');
const CleanWebpackPlugin = require('clean-webpack-plugin');

process.traceDeprecation = false;  // set to true if you want to find dep that is deprecated.

module.exports = merge(commonConfig, () => {
  return {
    mode: 'development',

    performance: {
      hints: 'warning'
    },

    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000,
      ignored: /node_modules/
    },
    plugins: [
      new CleanWebpackPlugin()  // Only for watch!
    ]
  }
});

我们用于启动生成的脚本：

"hot_build": "npm run clean:static && webpack -w --mode development --config webpack.dev.js --progress"

---

我有一个问题，为什么实际上dev版本与prod中的版本相同。 只有产品版本应该包含

MiniCssExtractPlugin.loader

version dev

style loader

dev

{
  test: /\.(css|sass|scss)$/,
  use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          importLoaders: 2,
          sourceMap: true
        },
      },
      ...

prod

{
  test: /\.(css|sass|scss)$/,
  use: [
      MiniCssExtractPlugin.loader,
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
          importLoaders: 2
        },
      },
      ...

优化部分也会发生同样的情况，您应该只在prod版本中使用它

下一期@babel/polyfill已弃用。删除

@babel/polyfill

并添加

core js

，并相应地配置

.babelrc

最大的问题是，每次更改都会删除构建文件夹，所有内容都会被“CopyPlugin”再次复制。使用

webpack dev server

不是更好吗？ 并重新构建所有内容，以便

webpack.dev.js

使用它。 然后第一次建立起来需要很长时间，但是你以后要做的改变会很快