[Vuejs]-Why do Vue single file components compile to such large files?

0👍

I don’t see anything wrong with your config, sometimes webpack needs to generate some runtime code that might explain the increase of your bundle size.

However you can reduce it by using the DefinePlugin to set the NODE_ENV variable to production and leverage the UglifyjsWebpackPlugin, it will result in optimized code that will most likely be smaller, so something like the following

module.exports = {
  entry: './resources/js/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'resources/js/temp')
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: JSON.stringify('production') },
    }),
    new webpack.optimize.UglifyJsPlugin({ compressor: { warnings: false } }),
  ]
}

You can also specify the option dead_code to uglify so it trims out code that is never used, which might help in your case.

Also, you should get rid of Grunt entirely using the babel-loader and the appropriate presets.

Leave a comment