Efficient way to manage CSS and Javascript in yii2 project

Question

Recently I got struck with a major issue of page load time with one of my projects developed using Yii2. The issue is regarding assets management. I have site.css, bootstrap.css, and other css from extensions used, along with site.js, bootstrap.js and js files from extensions used being loaded with each page. I know by using different AppAsset i can manage them a bit but still there remains a lot of unused css and js. I have researched over the internet and found great deal of ways to manage css and js file. Like minify, unusedcss, etc.

But I am looking for another way for it.

I want to know if there is any tool or any pattern that can be used to organise my CSS (both external and internal) and JS files (both external and internal) in such a manner that I can manage them on per page basis. And then only css/js which is used in page is added in the file (i.e. file is created on the fly) and send over to browser.

For example, suppose i have some custom css file with 500 css rules in one file named site.css and a bootstrap css file. My homepage uses about only 100 css rules from site.css, along with table and row classes only from bootstrap.css. What I want is that when a request is made for my website homepage then the css gets complied (or say wrapped) with only the used rules and send over with the response. And same goes of all the pages in my website. Each page having it's uniquely generated css file being sent over to browser. Also I want the same scenario with my JS code.

Has any one tried to achieve something like this? And if yes, then please share...

Thanks in advance

soodssr · Accepted Answer · 2020-11-06 13:44:12Z

Thanks @Mahsa and @Alex for your replies. I have tried what you suggested but non seemed to work for my use case.

So after more research I decided to use Grunt for my project. I felt that I need a solution which helps me in bifurcating my large CSS and JS files into smaller ones and then using them in layouts as required. This approach is not new, it's something similar how bootstrap manages it's css and js files.

In my project I have 3 different layout each using different as well as same css and js. So i bifurcated my site.css (which originally was more than 14000 lines) to smaller files like buttons.css, layout.css, links.css, table.css, etc.

Then for each layout i created a new Assets file like LayoutOneAssets.php, LayoutTwoAssets.php, etc. These will have only those css or js which are used in the layout or the pages using the layout.

After that with Grunt I created concatenated and minified version of css and js. For Example: layout.css + links.css + buttons.css => layoutone.css [This is used in LayoutOneAssets.php]

Only drawback of this approach was that I have to write same set of css and js file names in Grunt file and layout assets file also.

Also I disabled default Yii: JqueryAsset, BootstrapAsset. And just added jquery, bootstrap file in grunt common for all.

Alex · Accepted Answer · 2020-06-06 19:37:53Z

I use this trick. And source directory structure is the same as public directory.

class AppAsset extends AssetBundle
{
public $sourcePath = '@app/assets/client';

public $css = [
    'css/common/settings.css',
    'css/common/common.css',
];
public $js = [
    'js/common/common.js',
    'js/common/translation.js',
];
public $depends = [
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset',
];

/**
 * Initial
 */
public function init()
{
    parent::init();

    $dir = \Yii::$app->controller->id;
    $file = \Yii::$app->controller->action->id;

    if (file_exists(\Yii::getAlias($this->sourcePath) . "/js/" . $dir . DIRECTORY_SEPARATOR . $file . ".js")) {
        $this->js[] = "js/" . $dir . DIRECTORY_SEPARATOR . $file . ".js";
    }

    if (file_exists(\Yii::getAlias($this->sourcePath) . "/css/" . $dir . DIRECTORY_SEPARATOR . $file . ".css")) {
        $this->css[] = "css/" . $dir . DIRECTORY_SEPARATOR . $file . ".css";
    }
}
}

Mahsa · Accepted Answer · 2020-06-07 08:25:14Z

0

We are using this in our projects.

As it mentioned, it enables you to dynamically combine js and css files to optimize the html page. This allows you to improve the performance of google page speed.

answered Jun 7, 2020 at 8:25

Mahsa

3831 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

Efficient way to manage CSS and Javascript in yii2 project

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related