CODEWITHSUNDEEP
webpack
Pythorogus
Pythorogus

Reputation: 395

Webpack compile is very slow

I compile my JS and SASS with Webpack since a few. Before that, I used GULP for SASS, and compiling was very fast. With the same JS/SASS code and Webpack, my compile time is... 6 sec. It's very slow.

Here is the log message after compile (webpack -w), modifying only SASS or only 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

And my webpack config :

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

So, why compile takes so long, and what can I do to improve it ? Thank you !

Upvotes: 3

Views: 6745

Answers (1)

Alonad
Alonad

Reputation: 2256

A bit of advice:

exclude node_modules folder so that babel doesn't process it

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

step two, use this in babel loader, it will cache the results and not completely recompile from scratch

loader: 'babel-loader?cacheDirectory'

There are 2 options if you still need to go faster. First option is to use webpack-dev-server. It will compile your code without creating /dist folder, so to say it will be storing and supplying compiled code from memory.

Another option, which is for development only as well as previous option is to not use webpack in development process. You can compile sass to css in gulp. And you can supply to browser ES6 modules. Modern browsers understand them quite well. You just need to supply them with type module, this way

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

main.js will be entry file, with imports inside. You can of course add multiple js entry points as your code judging from your bundle size is quite heavy.

All the minification and transpiling stuff is for production, so you can run webpack once just before deploying.

Upvotes: 3

Related Questions