or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

build-features.mdconfiguration.mdcss-preprocessing.mdfile-operations.mdframework-integration.mdindex.mdjavascript-compilation.md
tile.json

build-features.mddocs/

Build Features

Asset versioning, vendor extraction, source maps, and development tools. Laravel Mix provides essential build features for optimizing assets, improving performance, and enhancing development experience.

Capabilities

Asset Versioning

Generate unique filenames for assets to enable browser cache busting and long-term caching strategies.

/**
 * Version assets by hashing them and placing this hash url used in the mix manifest
 * You may optionally pass an additional list of files to version in the mix manifest.
 * @param files - Additional files to version (optional)
 * @returns Mix API instance for chaining
 */
version(files?: string | string[]): Api;

Usage Examples:

const mix = require('laravel-mix');

// Version all compiled assets
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .version();

// Version specific additional files
mix.js('resources/js/app.js', 'public/js')
   .version(['public/images/logo.png', 'public/fonts/app.woff2']);

// Version with array of additional files
mix.sass('resources/sass/app.scss', 'public/css')
   .version([
     'public/images/**/*.{png,jpg,svg}',
     'public/fonts/**/*.{woff,woff2}'
   ]);

The versioning process creates a mix-manifest.json file:

{
  "/js/app.js": "/js/app.js?id=abc123",
  "/css/app.css": "/css/app.css?id=def456",
  "/images/logo.png": "/images/logo.png?id=ghi789"
}

Vendor Library Extraction

Extract commonly used libraries into separate bundles to improve caching and reduce main bundle size.

/**
 * Extract all matching chunks to specified output
 * @param config - Extraction configuration object
 * @param output - Output file path (optional)
 * @returns Mix API instance for chaining
 */
extract(config: Partial<Extraction>, output?: string): Api;

/**
 * Extract all chunks matching the given test to output
 * @param test - Test function to determine which modules to extract
 * @param output - Output file path (optional)
 * @returns Mix API instance for chaining
 */
extract(test: ExtractTestCallback, output?: string): Api;

/**
 * Extract the given libraries into vendor bundle
 * @param libs - Array of library names to extract
 * @param output - Output file path (optional)
 * @returns Mix API instance for chaining
 */
extract(libs: string[], output?: string): Api;

/**
 * Extract libraries from node_modules into vendor bundle
 * @param output - Output file path (optional)
 * @returns Mix API instance for chaining
 */
extract(output?: string): Api;

interface Extraction {
  to: string;
  libraries: string[];
  test: ExtractTestCallback;
}

type ExtractTestCallback = (module: any) => boolean;

Usage Examples:

const mix = require('laravel-mix');

// Extract all node_modules to vendor.js
mix.js('resources/js/app.js', 'public/js')
   .extract();

// Extract specific libraries
mix.js('resources/js/app.js', 'public/js')
   .extract(['vue', 'axios', 'lodash']);

// Extract to custom filename
mix.js('resources/js/app.js', 'public/js')
   .extract(['react', 'react-dom'], 'public/js/react-vendor.js');

// Extract with test function
mix.js('resources/js/app.js', 'public/js')
   .extract((module) => {
     return module.context && 
            module.context.indexOf('node_modules') !== -1 &&
            module.size > 50000; // Extract large modules only
   });

// Extract with configuration object
mix.js('resources/js/app.js', 'public/js')
   .extract({
     to: 'public/js/vendor.js',
     libraries: ['vue', 'vuex', 'vue-router'],
     test: (module) => module.context.includes('node_modules')
   });

Source Maps

Generate source maps for debugging compiled and minified code in development and production.

/**
 * Generate source maps
 * @param generateForProduction - Whether to generate maps in production (default: false)
 * @param devType - Source map type for development (default: 'eval-cheap-module-source-map')
 * @param productionType - Source map type for production (default: 'source-map')
 * @returns Mix API instance for chaining
 */
sourceMaps(
  generateForProduction?: boolean,
  devType?: string,
  productionType?: string
): Api;

Usage Examples:

const mix = require('laravel-mix');

// Enable source maps for development only (default)
mix.js('resources/js/app.js', 'public/js')
   .sourceMaps();

// Enable source maps for both development and production
mix.js('resources/js/app.js', 'public/js')
   .sourceMaps(true);

// Custom source map types
mix.js('resources/js/app.js', 'public/js')
   .sourceMaps(true, 'cheap-module-source-map', 'hidden-source-map');

// Different types for different environments
mix.js('resources/js/app.js', 'public/js')
   .sourceMaps(false, 'eval-source-map', 'nosources-source-map');

Source Map Types:

  • eval-cheap-module-source-map - Fast rebuild, good for development
  • source-map - Full source map, good for production debugging
  • hidden-source-map - Source map without reference, secure for production
  • nosources-source-map - Source map without source content
  • cheap-module-source-map - Faster alternative with less detail

BrowserSync Integration

Enable live reloading and browser synchronization for development.

/**
 * Use BrowserSync to monitor files for changes and inject changes into the browser
 * @param proxy - Proxy URL for existing server
 * @returns Mix API instance for chaining
 */
browserSync(proxy: string): Api;

/**
 * Use BrowserSync to monitor files for changes and inject changes into the browser
 * @param config - BrowserSync configuration options
 * @returns Mix API instance for chaining
 */
browserSync(config?: BrowserSyncConfig): Api;

interface BrowserSyncConfig {
  proxy?: string;
  server?: string | object;
  files?: string[];
  open?: boolean;
  notify?: boolean;
  port?: number;
  ui?: object;
  ghostMode?: object;
}

Usage Examples:

const mix = require('laravel-mix');

// Proxy existing server (Laravel, Django, etc.)
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .browserSync('localhost:8000');

// Standalone server mode
mix.js('resources/js/app.js', 'public/js')
   .browserSync({
     server: 'public',
     files: ['public/**/*.html']
   });

// Advanced configuration
mix.js('resources/js/app.js', 'public/js')
   .browserSync({
     proxy: 'myapp.test',
     files: [
       'public/**/*.js',
       'public/**/*.css',
       'resources/views/**/*.php'
     ],
     open: false,
     notify: false,
     port: 3001,
     ui: {
       port: 3002
     },
     ghostMode: {
       clicks: true,
       forms: true,
       scroll: true
     }
   });

Hot Module Replacement

Enable hot module replacement for instant updates during development (configured via CLI).

# Enable HMR for JavaScript
npx mix watch --hot

# Enable HMR with HTTPS
npx mix watch --hot --https

HMR works automatically with:

  • Vanilla JavaScript modules
  • Vue.js components (Vue HMR)
  • React components (React Fast Refresh)
  • CSS and preprocessed stylesheets

Build Optimization Features

Automatic Code Splitting

Laravel Mix automatically enables code splitting for better caching:

// Automatically creates separate chunks for:
// - Entry points
// - Dynamic imports
// - Vendor libraries (when using extract())
mix.js('resources/js/app.js', 'public/js')
   .extract(); // Creates vendor.js and manifest.js

Tree Shaking

Dead code elimination is automatically enabled in production mode for ES modules.

Bundle Analysis

Generate bundle analysis reports:

mix.js('resources/js/app.js', 'public/js')
   .options({
     runtimeChunkPath: 'js'  // Customize runtime chunk path
   });

Development vs Production Differences

Development Mode

  • Fast incremental builds
  • Source maps enabled by default
  • No minification
  • Detailed error messages
  • File watching enabled

Production Mode

  • Full optimization and minification
  • Tree shaking enabled
  • Source maps disabled by default
  • Smaller bundle sizes
  • Asset versioning recommended
# Development build
npx mix

# Production build  
npx mix --production

Performance Optimization Tips

  1. Use extraction wisely: Extract stable vendor libraries
  2. Enable caching: Use versioning for long-term caching
  3. Optimize source maps: Use appropriate types for each environment
  4. Bundle splitting: Keep main bundle small with dynamic imports
  5. Asset optimization: Compress images and fonts before copying
// Optimized build configuration
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .extract(['vue', 'axios']) // Stable vendor libs
   .sourceMaps(false, 'eval-cheap-module-source-map', 'hidden-source-map')
   .version() // Enable caching
   .options({
     processCssUrls: false // Skip URL processing if not needed
   });