Minification of vue project

Hello Everyone!

I want to archive minification (removing all whitespaces, newlines, etc.) of sources of my project.
So instead 20mb i want to have ~4mb

My sources:

//file name package.json
{
  "name": "abc",
  "version": "1.0.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
...
}

My project contain:

  • many *.vue files containing components which I have build.
  • some *.js files

When I’m typing in my console:

npm run build

It runs script from above -> “build”: “vue-cli-service build”

Everything runs and I end up with result:

What I’ve got:

and app.js file is very heavy ~20mb, I don’t know where is 3.5mb build.min.js file, how to force npm via this vue cli to archive this?

Maybe You know how decrease vue application from ~20mb to ~3.5mb?

20mb is indeed very big for a build result. Have you checked the codes inside dist/app.js and is it already minified? If not, perhaps it’s related with this issue.

Some methods to help reducing the size:

  • Are you lazy loading your components or modules? If your app consist of different routes, you can lazy loading them by doing this. By lazy loading your components, we can identify specific codes that causes the large size of the build.

  • Do you have images, json, or any other asset files that has a big size, also compiled as part of your code? You may want to lazy load them, or compress the size if possible.

Hello Everyone,

I have realised what i did wrong:

  • it’s worth to check webpack --version ( I had old one sudo apt get install webpack installed me 3.6.4 version on Ubuntu 19.04)

  • I was trying use vue.config.js which wrapps webpack and this was not good idea something didnt work for me

  • finally I’ve configured webpack.config.js for vue + vuetify which looks like this:

    const path = require('path')
    
    const VueLoaderPlugin = require('vue-loader/lib/plugin')
    const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
    const TerserPlugin = require('terser-webpack-plugin');
    const JavaScriptObfuscator = require('webpack-obfuscator');
    
    module.exports = {
      entry: './src/main.js',
      output: {
        path: path.resolve(__dirname,
            '../monitglass-backend/src/main/resources/static/js/app'),
        publicPath: '/dist/',
        filename: 'app.js'
      },
      plugins: [new VueLoaderPlugin()
        , new VuetifyLoaderPlugin()
        , new TerserPlugin()
        , new JavaScriptObfuscator({
          identifierNamesGenerator: 'mangled'
        })
      ],
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              loaders: {}
              // other vue-loader options go here
            }
          },
          {
            test: /\.css$/,
            use: [
              'style-loader',
              'css-loader'
            ]
          },
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
          },
          {
            test: /\.(png|jpg|gif|svg|ttf|eot|woff|woff2)$/,
            loader: 'file-loader',
            options: {
              name: '[name].[ext]?[hash]'
            }
          },
          {
            test: /\.s(c|a)ss$/,
            use: [
              'vue-style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                options: {
                  implementation: require('sass'),
                  fiber: require('fibers'),
                  indentedSyntax: true // optional
                }
              }
            ]
          }
        ]
      },
      optimization: {
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              ecma: undefined,
              warnings: false,
              parse: {},
              compress: {},
              mangle: true, // Note `mangle.properties` is `false` by default.
              module: false,
              output: null,
              toplevel: false,
              nameCache: null,
              ie8: false,
              keep_classnames: undefined,
              keep_fnames: false,
              safari10: false,
            },
          }),
        ],
      },
    }
    

So on the end of the day I’m finishing with app.js 3.82 MiB minified and obfuscated. I hope this post will help others who will look for such answer.

1 Like