Webpack компилируется очень медленно

Question

Я собираю JS и SASS с помощью Webpack, так как некоторые из них. До этого я использовал GULP для SASS, и компиляция была очень быстрой. С тем же кодом JS / SASS и Webpack мое время компиляции составляет ... 6 секунд. Это очень медленно.

Вот сообщение журнала после компиляции (webpack -w), изменяющее только SASS или только JS:

Hash: 0dd09b4f671dc58e7c36
Version: webpack 4.30.0
Time: 6319ms
Built at: 2019-04-29 11:58:43
                                          Asset       Size  Chunks             Chunk Names
                                  css/admin.css    405 KiB   admin  [emitted]  admin
                                    css/app.css    253 KiB     app  [emitted]  app
 css/files/169356a469a7a7b5ab89187fa1aae785.otf    192 KiB          [emitted]
 css/files/2299ad0b3f63413f026dfec20c205b8f.gif   8.28 KiB          [emitted]
 css/files/2f99a85426a45e0c7f8707aae53af803.ttf    168 KiB          [emitted]
 css/files/31f15875975aab69085470aabbfec802.png   1.32 KiB          [emitted]
 css/files/3a80587b4415f8b0b21cdeb8e380a86c.eot    168 KiB          [emitted]
 css/files/59409df6e088d74fd4220b43a12b85f8.otf    188 KiB          [emitted]
 css/files/84abe14c9756256a4b91300ba3e4ec62.ttf    167 KiB          [emitted]
 css/files/84b76dee6b27b795e89e3649078a11c2.png   1.33 KiB          [emitted]
css/files/b2918f7cd1f06a16aecf9124e47dba13.woff   68.3 KiB          [emitted]
 css/files/be5e6c1cc25bfbd6d92647d56aae28d4.eot    168 KiB          [emitted]
 css/files/d9d2d0b1308cb694aa8116915592e2a9.png  280 bytes          [emitted]
css/files/ff372e76c393da9b47fda7fd860c181d.woff   67.6 KiB          [emitted]
                                    js/admin.js    3.4 MiB   admin  [emitted]  admin
                                      js/app.js   4.35 MiB     app  [emitted]  app
 + 33 hidden assets
Entrypoint app = css/app.css js/app.js
Entrypoint admin = css/admin.css js/admin.js
[./src/sass/style.scss] 39 bytes {app} [built]
    + 105 hidden modules
Child mini-css-extract-plugin ../../../pierre gomba/www/jobin/node_modules/css-loader/index.js??ref--7-1!../../../pierre gomba/www/jobin/node_modules/postcss-loader/li                                                                      b/index.js??ref--7-2!../../../pierre gomba/www/jobin/node_modules/sass-loader/lib/loader.js??ref--7-3!../../../pierre gomba/www/jobin/src/sass/style.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/index.js?!./node_modules/postcss-loader/lib/index.js?!./node_modules/sass-loader/lib/loader.js?!./src/sass/style.scss] ./node_modules/cs                                                                      s-loader??ref--7-1!./node_modules/postcss-loader/lib??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./src/sass/style.scss 756 KiB {mini-css-extract-plugi                                                                      n} [built]
    [./src/fonts/Raleway/Raleway-Bold.eot] 69 bytes {mini-css-extract-plugin} [built]
    [./src/fonts/Raleway/Raleway-Bold.otf] 69 bytes {mini-css-extract-plugin} [built]
    [./src/fonts/Raleway/Raleway-Bold.ttf] 69 bytes {mini-css-extract-plugin} [built]
    [./src/fonts/Raleway/Raleway-Bold.woff] 70 bytes {mini-css-extract-plugin} [built]
    [./src/fonts/Raleway/Raleway-Regular.eot] 69 bytes {mini-css-extract-plugin} [built]
    [./src/fonts/Raleway/Raleway-Regular.otf] 69 bytes {mini-css-extract-plugin} [built]
    [./src/fonts/Raleway/Raleway-Regular.ttf] 69 bytes {mini-css-extract-plugin} [built]
    [./src/fonts/Raleway/Raleway-Regular.woff] 70 bytes {mini-css-extract-plugin} [built]
        + 7 hidden modules

И мой конфиг веб-пакета:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
  mode: 'development',
  entry: {
    app: [
      './src/js/app.js',
      './src/sass/style.scss',
    ],
    admin: [
      './src/js/admin.js',
      './src/sass/admin.scss',
    ],
  },
  output: {
    path: path.resolve(__dirname, './public/'),
    filename: 'js/[name].js'
  },
  resolve: {
      alias: {
          'jquery': require.resolve('jquery'),
      }
  },
  module: {
    rules: [
      {
        test: /\.js/,
        loader: 'babel-loader'
      },
      {
        test: require.resolve('jquery'),
        use: [
          {
            loader: 'expose-loader',
            options: 'jQuery'
          },
          {
            loader: 'expose-loader',
            options: '$'
          }
        ]
      },
      {
        test : /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { sourceMap: true }
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { sourceMap: true }
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true }
          },
          {
            loader: "sass-loader",
            options: { sourceMap: true }
          }
        ]
      },
      {
        test: /.(png|jpg|gif|woff(2)?|eot|otf|ttf|svg)(\?[a-z0-9=\.]+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'css/files/[hash].[ext]',
              publicPath: '..'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].css"
    })
  ],
  optimization: {
    minimize: true,
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
};

Итак, почему компиляция занимает так много времени, и что я могу сделать, чтобы улучшить ее? Спасибо!

Answer 1

Небольшой совет:

исключите папку node_modules, чтобы babel не обработал ее

test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/

шаг второй, используйте это в загрузчике babel, он будет кешировать результаты, а неполностью перекомпилировать с нуля

loader: 'babel-loader?cacheDirectory'

Есть 2 варианта, если вам все еще нужно идти быстрее.Первый вариант - использовать webpack-dev-server.Он скомпилирует ваш код без создания папки / dist, так что он будет хранить и предоставлять скомпилированный код из памяти.

Другой вариант, который предназначен только для разработки, а также предыдущий вариант, заключается в том, чтобы не использовать веб-пакет в процессе разработки.Вы можете скомпилировать sass в css в gulp.И вы можете поставить в браузер модули ES6.Современные браузеры понимают их достаточно хорошо.Вам просто нужно снабдить их модулем типа, таким образом

<script type="module" src="javascripts/main.js"></script>

main.js будет входным файлом с импортом внутри.Конечно, вы можете добавить несколько точек входа js, так как ваш код, судя по размеру вашего пакета, довольно тяжелый.

Все вещи для минимизации и переноса предназначены для производства, так что вы можете запустить webpack один раз перед развертыванием.