Vue.js Webpack Split moment-timezone Into Vendor Bundle

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

npm install moment --savenpm 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.