tzkmx
11/1/2019 - 5:51 PM

Webpack splitting chunks examples

Webpack splitting chunks examples

0-readme.md
content_copyfile_download
  • Rendered
  • Source

credits: https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

1-simple-chunk-all.js
content_copyfile_download
const webpack = require('webpack')
import baseConfig from './webpack.config.babel.js'

module.exports = { // eslint-disable-line
  ...baseConfig,
  mode: 'production',
  devtool: 'source-map',
  plugins: [
    new webpack.HashedModuleIdsPlugin()
  ],
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all'
    }
  }
}
2-chunk-modules-all.js
content_copyfile_download
const webpack = require('webpack')
import baseConfig from './webpack.config.babel.js'

module.exports = { // eslint-disable-line
  ...baseConfig,
  mode: 'production',
  devtool: 'source-map',
  plugins: [
    new webpack.HashedModuleIdsPlugin()
  ],
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all'
    }
  }
}
3-chunk-modules-threshold.js
content_copyfile_download
const webpack = require('webpack')
import baseConfig from './webpack.config.babel.js'

module.exports = { // eslint-disable-line
  ...baseConfig,
  mode: 'production',
  devtool: 'source-map',
  plugins: [
    new webpack.HashedModuleIdsPlugin()
  ],
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 12000,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name (module) {
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
            return `npm.${packageName.replace('@', '')}`
          }
        }
      }
    }
  }
}