Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS and JS compression (Trac #2110) #2110

Closed
elgg-gitbot opened this issue Feb 16, 2013 · 17 comments
Closed

CSS and JS compression (Trac #2110) #2110

elgg-gitbot opened this issue Feb 16, 2013 · 17 comments

Comments

@elgg-gitbot
Copy link

Original ticket http://trac.elgg.org/ticket/2110 on 40318396-05-06 by trac user BvdH, assigned to trac user sembrestels.

Elgg version: 1.7

Hello developer,

to make elgg a little bit more efficent it would be great if the CSS and JS-files would be compressed. I have looked for something like that and found a solution (http://www.php-vision.de/plugins-scripte/javascript-css-compressor-code.php) for the simple-cache-case. I poste the code under this comment.

Now my questions: Is this a good way to safe load time? Is it possible to add that (ore something like that) into the next elgg-Version?

Best,

BvdH

Here is the new code:

/**

  • Regenerates the simple cache.
    *

  • see elgg_view_register_simplecache
    *
    */
    function elgg_view_regenerate_simplecache() {
    global $CONFIG;

    // todo elgg_view() checks if the page set is done (isset($CONFIG->pagesetupdone)) and
    // triggers an event if it's not. Calling elgg_view() here breaks submenus
    // (at least) because the page setup hook is called before any
    // contexts can be correctly set (since this is called before page_handler()).
    // To avoid this, lie about $CONFIG->pagehandlerdone to force
    // the trigger correctly when the first view is actually being output.
    $CONFIG->pagesetupdone = TRUE;

    if (isset($CONFIG->views->simplecache)) {
    if (!file_exists($CONFIG->dataroot . 'views_simplecache')) {
    mkdir($CONFIG->dataroot . 'views_simplecache');
    }

    if (!empty($CONFIG->views->simplecache) && is_array($CONFIG->views->simplecache)) {
        foreach($CONFIG->views->simplecache as $view) {               
            $viewcontents = elgg_view($view);
            // Add for compression
            if(strpos($view, 'css') !== FALSE) $viewcontents = clean_css_code($viewcontents);
            if(strpos($view, 'js') !== FALSE) $viewcontents = clean_js_code($viewcontents);
            $viewname = md5(elgg_get_viewtype() . $view);
            if ($handle = fopen($CONFIG->dataroot . 'views_simplecache/' . $viewname, 'w')) {
                fwrite($handle, $viewcontents);
                fclose($handle);
            }
        }
    }
    
    datalist_set('simplecache_lastupdate', 0);
    

    }

    unset($CONFIG->pagesetupdone);
    }

/** This Functions Cleans CSS Stylesheet Code

  • author M. Schwarz (http://www.php-vision.de/plugins-scripte/javascript-css-compressor-code.php)
  • param String $jscode
  • return String
    */
    function clean_css_code( $code )
    {
    $code = clean_comments ( $code );
    $code = preg_replace('/\s+/',' ', $code);
    $code = preg_replace('/([\ ]?){([\ ]?)/',"{\r\n\t", $code);
    $code = preg_replace('/;([\ ]?)/',";\r\n\t", $code);
    $code = preg_replace("/([\ ]?):([\ ]?)/",":", $code);
    $code = preg_replace("/([\t]?)([\ ]?)}([\ ]?)/","}\r\n", $code);
    return $code;
    }

/** This Functions Cleans Javascript Code

  • author M. Schwarz (http://www.php-vision.de/plugins-scripte/javascript-css-compressor-code.php)
  • param String $jscode
  • return String
    /
    function clean_js_code( $jscode )
    {
    $code = clean_comments ( $jscode );
    $code = preg_replace('#//(.
    )(\n|\r|\r\n)#','', $code);
    $code = preg_replace('/([\ ]+)/',' ', $code);
    $code = preg_replace('/([\t]+)/',' ', $code);
    $code = preg_replace('#([\n\r]{1,2}?)( ?){( ?)([\n\r]{1,2}?)#',"{", $code);
    $code = preg_replace('/;( ?)([\n\r]{1,2}?)/',";", $code);
    return $code;
    }

/** This Functions Cleans Standard Block Comments( /* )

  • author M. Schwarz (http://www.php-vision.de/plugins-scripte/javascript-css-compressor-code.php)
  • param String $code
  • return String
    /
    function clean_comments ( $code )
    { // $code = preg_replace('#(/_)(.
    )(_/)#','', $code);
    do{ $start = strpos($code ,'/');
    $ende = strpos($code ,'
    /', $start);
    $comm = substr( $code, $start+2,$ende-$start-2 );
    $code = str_replace('/'.$comm.'/','',$code);
    }while( $ende );
    return $code;
    }
@elgg-gitbot
Copy link
Author

ewinslow wrote on 40318421-12-13

I'm 100% behind this suggestion. Our team has been using Minify for some time to this end. Good stuff.

@elgg-gitbot
Copy link
Author

trac user milan wrote on 40318842-06-05

I made a similar trac report for css (http://trac.elgg.org/ticket/1962). Although compacting JavaScript is more problematic than CSS as most JavaScript libraries (i.e. jQuery) have been highly compacted using the google closure library (or something like it), so in some cases you could make the files bigger.

Maybe a special view function that takes a parameter to compact custom javascript? You'll also need to compare which of the many algorithms is best suited to Elgg, but the best I've seen is in (http://fatfree.sourceforge.net/#optimize) and they balance out a trade off between processing (lots of preg_replaces()) and actually compacting.

Also these functions need a fair amount of testing as if you see my trac report on CSS we had to modify the original algorithm as certain versions of IE didn't like our compacted CSS and because of that I wouldn't want it in 1.7.2 imho

@elgg-gitbot
Copy link
Author

trac user BvdH wrote on 40318910-09-19

I think your version for CSS is more restrictive. I tested my version also on IE8 and it works. So for a first step you can use this code (eventually you can disable it in the backend) and in a later step (e.g. for 1.8) you can use other codes for compression.

@elgg-gitbot
Copy link
Author

ewinslow wrote on 40325686-12-10

I've created a simple plugin for this [http://code.google.com/p/elgg-minify here].

@elgg-gitbot
Copy link
Author

trac user BvdH wrote on 40340998-03-18

Thanks, it works.

@elgg-gitbot
Copy link
Author

trac user milan wrote on 40341386-02-10

You may want to wait till this bug (http://trac.elgg.org/ticket/2115) in simplecache is fixed before deploying this.

@elgg-gitbot
Copy link
Author

Milestone changed to Elgg 1.8 by cash on 40401174-01-07

@elgg-gitbot
Copy link
Author

Milestone changed to Elgg 1.9 by ewinslow on 40895073-11-14

@elgg-gitbot
Copy link
Author

ewinslow wrote on 42623746-04-10

Let's integrate minify into core. This is a best practice that every site should be doing.

@elgg-gitbot
Copy link
Author

Milestone changed to Elgg 1.9.0 by ewinslow on 42623746-04-10

@elgg-gitbot
Copy link
Author

trac user sembrestels wrote on 42686275-02-04

PR: #379

@elgg-gitbot
Copy link
Author

trac user Sem wrote on 42776798-06-11

Refs #2110. Added Minfy as vendor.
Changeset: 85f5d4b

@elgg-gitbot
Copy link
Author

trac user Sem wrote on 42776798-08-08

Fixes #2110. Added hook handler to minify css and js when generating simplecache.
Changeset: ba3126f

@elgg-gitbot
Copy link
Author

trac user Steve Clay wrote on 42776798-08-20

Merge pull request #393 from sembrestels/minify-rebased

Fixes #2110: Adds options to compress CSS/JS in simplecache
Changeset: 406ee0e

@elgg-gitbot
Copy link
Author

trac user Steve Clay <steve@... wrote on 42948179-04-21

In [changeset:"406ee0ee85a92403f98515882c5f17ecf4555aa0/elgg"]:

#!CommitTicketReference repository="elgg" revision="406ee0ee85a92403f98515882c5f17ecf4555aa0"
Merge pull request #393 from sembrestels/minify-rebased

Fixes #2110: Adds options to compress CSS/JS in simplecache

@elgg-gitbot
Copy link
Author

trac user sembrestels wrote on 42948179-05-20

In [changeset:"ba3126f0f64cf709c8dfb0a31db6f50643bb6039/elgg"]:

#!CommitTicketReference repository="elgg" revision="ba3126f0f64cf709c8dfb0a31db6f50643bb6039"
Fixes #2110. Added hook handler to minify css and js when generating simplecache.

@elgg-gitbot
Copy link
Author

trac user sembrestels wrote on 42948179-06-05

In [changeset:"85f5d4b3eb382948a012006e758bfb539d0ee191/elgg"]:

#!CommitTicketReference repository="elgg" revision="85f5d4b3eb382948a012006e758bfb539d0ee191"
Refs #2110. Added Minfy as vendor.

adayth pushed a commit to adayth/Elgg that referenced this issue Feb 22, 2013
adayth pushed a commit to adayth/Elgg that referenced this issue Feb 22, 2013
adayth pushed a commit to adayth/Elgg that referenced this issue Feb 22, 2013
Fixes Elgg#2110: Adds options to compress CSS/JS in simplecache
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

1 participant