[Blog] Blockstack.js: Compiling, minifying and keeping outside of the bundle

Community
#1

BlockStack is a project from the future. If you want to build a dapp with the platform, you can start with iterating the examples. However, when you put it that way you’ll realize the project file size is almost 2mb. If you import the package into your React project, which is using in the examples like that, compiling will take some time and this even kill your productivity.

So lets try to keep outside the Blockstack.js and make it small as we can.

First of all we need to clone the project to our local development enviroment. I could give you that file as compiled, but you can trust anyone while building dapps. Included me. So you have to build for yourself. ** Security First.**


git clone [email protected]:blockstack/blockstack.js.git

And then we need to install the dependencies. After that we can compile the source.

In this article, we are compiling 17.2.0 version.


cd blockstack.js
npm install
npm run compile

Allright, now you can find the blockstack.js file in the lib folder.

We need the file to convert es2015.


# install the babel cli if you don't have
npm install --save-dev babel-cli

# convert the file to old school javascript.
npx babel blockstack.js --out-file blockstack.es5.js

So now we have blockstack.es5.js. We will minify that file.


# install the babel cli if you don't have

npm install uglify-js -g

# Minifying
uglifyjs blockstack.es5.js --compress --mangle reserved=['BigInteger','ECPair','Point'] --output blockstack.min.js

You can find here why we have to use reserved words.

YAY! now we have minified blockstack.js and the file size is 977kb. Finally you can import the file in your html.


<script src="/blockstack.min.js"></script>

And you can access to the methods through window object.


const { 
isSignInPending, isUserSignedIn, redirectToSignIn,  
handlePendingSignIn, signUserOut
} = window.blockstack;

I know 977kb is still big for the web. I think we need to ping the developers on the forum about this.

Ok, now you can continue to play with your dapp. Enjoy.

2 Likes