Cleaning up webflow.js

Design help Custom code
1

webflow.js has a lot going on inside it. In fact, its pretty bulky to accommodate for all those widgets. This brings me to my point: I’d like to remove some of the stuff thats not being used… but when I do, all webflow JS seems to stop working.

Does anyone know a good solution for cleaning up some of this unused JS?

It would be cool if there was a build script that only included the scripts you used in the webflow.js file.

Thanks!

2 Likes
2

@bwinslow, thanks for the feedback! We (@danro and I) have been building webflow.js to be modular, with the future intent of making it publish only the bits that are used on your site.

Which parts are you trying to remove that break things?

4 Likes
3

Like @callmevlad mentioned, we have plans to auto-generate webflow.js to only include the scripts you are using. And once the API is a bit more stable, we plan to open source the webflow.js modules on github.

In the interim, we’ve kept the file unminified to make it easier for people to make changes if need be. (unless you host with us, then it gets minified+gzip’d)

As a general rule of thumb, it should be safe for you to remove any of the modules that begin with Webflow.define. For example, if you wish to remove the maps widget, simply remove the function Webflow.define('maps'...

You might only run into trouble if you attempt to remove the touch module, because certain widgets depend on it.

Thanks for the feedback!

3 Likes
4

Removing the forms module seems to break the page scroll. I did not dare to dismantle any more.

Great product though and good customer service.

5

Hi @danro and @callmevlad, rather than start another topic on this same vein, my question seems to fit with the title:

I’m working with a team to rebuild a site I originally designed and prototyped in webflow. The production site is being built in wordpress and I have had to rebuild the html/css to be ‘mobile first’.

I’m added the webflow,js file to the project as I wanted to use the code for the interactions that was used in the prototype (that was what was signed off and the webflow animations work very nicely).

Is there a easy way to strip out the code apart for the stuff needed for the interactions?

The file is much more complicated than my js reading skills can handle! I was hoping perhaps you could provide a list of what needed for the interactions to work so I could remove everything else (for performance)?

Many thanks for any advice

6

Hi @matt50,

We’re working on a way to generate custom builds of webflow.js from the designer … but in the meantime I generated a custom IX-only build for you. Here’s how to get it running:

  1. Scroll to the bottom of your exported webflow.js file and look for something like this:
  Webflow.require('ix').init([
    {"slug":"my-interaction", ... },
    {"slug":"another-one", ... }}
  ]);

  1. This is the Interactions configuration, copy this function block and save it for later.

  2. Grab the minified Webflow IX custom build.

  3. Follow the example HTML structure here: Webflow.js custom build - interactions only · GitHub - this outlines the scripts needed to get interactions running at a minimum.

Bonus: If you prefer, you can put the IX config function in another script file (to reduce code in your HTML), just as long as it comes after webflow-ix-min.js.

That should do it!

Happy to hear that Webflow was able to help your team. :smile:

3 Likes
7

Hi @danro
That is unbelievably helpful, thank you so much – it works perfectly :smile:

While I’m on, it seems a good time to say how much more enjoyable – and simply better – Webflow has made my web design and development work. Thanks for the great work from you and the Webflow team. I genuinely look forward to seeing the future developments and all you have in store for us.

Matt

2 Likes
8

Hi danro, I can see that you guys are working hard to make Webflow IX usable for development work after export. Does this effort work this thread? http://forum.webflow.com/t/how-to-run-webflow-actions-from-js/3777/6 . How best can I use Webflow IX to avoid rebuilding Webflow interaction via jQuery after export. Thanks

9

This works great, @danro Thanks for posting this solution. Question: does webflow-ix-min.js do any calls to external scripts, sites or assets? Like something that exists on Webflow’s server or somewhere else? It’s hard to tell from the minified code. Also, is there a regular code version of the minified code?

Thanks much.

1 Like