CODEWITHSUNDEEP
optimizationwebpackwebpack-4
PierBJX
PierBJX

Reputation: 2353

Webpack - optimizarion node_modules & import

Configuring webpack I was wondering something for the optimization. I have two JS files index.js and helper.js. I import helper.js in index.js like that:

import * as helper from 'helper.js';

In these two JS files, I import some node_modules.

Regarding this, to prevent duplication code and caching you can do that:

  const path = require('path');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      index: './src/index.js'
    },
    output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist')
    },
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    }
  };

Or should I do just something like that:

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

Hope you could help me

Upvotes: 1

Views: 556

Answers (1)

nanobar
nanobar

Reputation: 66435

You don't need the test as it defaults to node_modules. It will only compile the ones you use. Remember to include that file first before your app one(s) when including them from your html.

It will split all vendor modules out regardless of what file they are included from.

It's worth noting though that since you're importing helper.js into index.js and creating one bundle, webpack will already not duplicate the node_modules but share them, so long as helper.js is not a third party module compiled as a non-es6 module.

In other words webpack will automatically tree shake stuff in your own source files, and es2016 modules in node_modules (not CJS/UMD modules which is the most common).

You only need to split to a vendor bundle if:

a) Your vendor bundle changes with a lot less frequency than your src code (not that common if you're often running npm update)

b) You're producing multiple output files and you want them to share vendor.js / you don't want to declare them as external and make the consumer install them (e.g. a library of components)

P.S. Not exactly sure what runtimeChunk is for but personally I would not specify it (leave it as default) unless you have a good reason.

Upvotes: 2

Related Questions