Skip to content

Instantly share code, notes, and snippets.

@olivergeorge

olivergeorge/a-terser.md

Last active Sep 11, 2020
Embed
What would you like to do?

package.json

{
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@blueprintjs/core": "^3.22.0",
    "@blueprintjs/datetime": "^3.15.1",
    "@blueprintjs/select": "^3.11.2",
    "@blueprintjs/table": "^3.8.2",
    "components": "file:../components",
    "fixed-data-table": "~0.6",
    "moment": "^2.10.6",
    "react": "^15.0.0",
    "react-addons-css-transition-group": "^15.6.2",
    "react-dom": "^15.0.0",
    "react-select": "1.0.0-rc.2",
    "react-text-mask": "^5.4.3",
    "react-virtualized-auto-sizer": "^1.0.2",
    "text-mask-addons": "^3.8.0",
    "toastr": "^2.1.4"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "babel-loader": "^8.1.0",
    "css-loader": "^4.3.0",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

build.edn

{:main            app.core
 :output-to       "resources/public/js/index.js"
 :output-dir      "resources/public/js"
 :asset-path      "/static/frontend/js/"
 :target          :bundle
 :closure-defines {cljs.core/*global* "window"}}

Advanced build

$ clj -m cljs.main -co build.edn -O advanced -c

$ ls -lah resources/public/js/index.js
olivergeorge  staff   1.2M Sep 12 08:36 resources/public/js/index.js

webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({

//        3.9mb 5s
//        terserOptions: {
//            compress: false, mangle: false,
//        },

//        3.08mb 8s
//        terserOptions: {
//            compress: false, mangle: true,
//        },

//        Still running after 8 minutes
//        terserOptions: {
//            compress: true, mangle: true,
//        },

    })],
  },
};
$ npx webpack --progress resources/public/js/index.js -o resources/public/js/app.js

92% chunk asset optimization TerserPlugin

Seems like you can sort of hack around the problem by using chunks to separate the cljs app from node module deps.

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
        test: "1.app.js",
        parallel: true,
    })],
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendors',
                chunks: 'all'
            }
        }
    }
  },
};
time npx webpack --progress resources/public/js/index.js -o resources/public/js/app.js

...
Assets: 
  app.js (1.31 MiB)
  1.app.js (1.73 MiB)
...

21.85s user 1.03s system 154% cpu 14.778 total

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment