Vue.js Webpack Split moment-timezone Into Vendor Bundle

January 7, 2018

If you utilize moment-timezone in your project, you shall notice the size of app.jsbloated instead of vendor.js.

npm install moment --save
npm install moment-timezone --save
import moment from 'moment'
import 'moment-timezone'

You can analyze bundle size by running npm run build --report and you will notice moment-timezone's latest.json is in app.js instead of vendor.js. If you observe carefully, you will notice moment-timezone js files is within vendor.js. Thus, the problem lies with .json file.

Edit build/webpack.prod.conf.js, observe changes in // EDIT.

...
const webpackConfig = merge(baseWebpackConfig, {
  ...
  plugins: [
    ...
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          // EDIT: Enable .css and moment-timezone json file as vendor
          /\.(js|css|sass|scss|less|json)$/.test(module.resource) &&
          // /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    ...
  ],
  ...
})

The above changes will build moment-timezone's latest-json into vendor.js.

You can also reduce moment.js bundle size.

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.