根据页面加载不同的js文件

Question

I'm trying to optimize the load of all pages on laravel, so I want to load js files only on the pages that use them.

I ended up with a commons js file for all and 3 other js for specific files. Like so:

mix   //.scriptsIn('resources/assets/js');
    .scripts([
      // commons
          // cdn
          // 'bootstrap.min.js',
          // 'jquery.min.js',
          'scripts.js',
          'template.js',
      ]);

mix.version(["css/all.css", "js/all.js"]);

elixir(function(mix) {
    mix.scripts([
// welcome page
            'wow.js',
            'jquery.lazyloadxt.extra.min.js',
            // jquery.easing.min.js  // unused
          ], "public/js/welcome.js", 'resources/assets/js');
    mix.version(["js/welcome.js"]);

    mix.scripts([
// chart pages
            'highcharts.js',
            'jquery.highchartTable-min.js',
            ], "public/js/charts.js", 'resources/assets/js');
    mix.version(["js/charts.js"]);

    mix.scripts([
//table pages
            'jquery.tablesorter.min.js',
          ], "public/js/tables.js", 'resources/assets/js');
    mix.version(["js/tables.js"]);

});

So I put my all.js on the master view, and what I'd like to do is a way to include the other on just the pages that I want. tables.js only on pages that have a table, and so on.

---

Can I do this without having to manually put the script tag on the individual views?

I'm thinking something like setup a service provider and check for a variable?

public function boot()
{
    // view()->composer('master', function ($view) {
    //     $view->with('js_include', 'table.js');
    // });
}

And in master view, if exists, include? A page could have table and charts, so I would have to do a foreach. Am I overcomplicating it?

Answer 1

You could write a custom directive for each of the JS scripts and include the created tag name in the templates.

class BladeServiceProvider extends ServiceProvider {
    public function boot()
    {
        Blade::directive('chartsjs', function($expression) {
            return "<?php
               echo '<script type=...>...</script>';
        });     
   } 

   //...
}

// view template: example.blade.php

@section('js')
     @chartsjs
@stop

Answer 2

Ok I'm doing:

public function boot()
{
    $welcome = ['home'];
    $charts = ['meal.*'];
    $tables = ['meal.*', 'trainings.*', 'plans.*', 'nutrition.index',
          'history.index', 'exercises.index'];

    $pages = array_merge($welcome, $charts, $tables);

    foreach ($pages as $key => $page) {
      $js_includes = [];
      foreach (['welcome', 'charts', 'tables'] as $key => $value) {
        if (in_array($page, $$value)) $js_includes[] = "js/{$value}.js";
      }

      View::composer($page, function ($view) use ($js_includes) {
          $view->with('js_include', $js_includes);
      });
    }
}

In just the master view:

@if (isset($js_include))
  @foreach($js_include as $key => $js)
    <script src="/{{ $js }}"></script>    
  @endforeach
@endif

It works on localhost but not on heroku deploy :/

I changed view()->composer for View::composer and added use View; but same issue

---

Commenting //protected $defer = true; solved the issue