Guide
Essentials
- Installation
- Introduction
- The Kdu Instance
- Template Syntax
- Computed Properties and Watchers
- Class and Style Bindings
- Conditional Rendering
- List Rendering
- Event Handling
- Form Input Bindings
- Components Basics
Components In-Depth
- Component Registration
- Props
- Custom Events
- Slots
- Dynamic & Async Components
- Handling Edge Cases
Transitions & Animation
- Enter/Leave & List Transitions
- State Transitions
Reusability & Composition
- Mixins
- Custom Directives
- Render Functions & JSX
- Plugins
- Filters
Tooling
- Single File Components
- TypeScript Support
- Production Deployment
Scaling Up
- Routing
- State Management
- Server-Side Rendering
- Security
Internals
- Reactivity in Depth
Migrating
- Migration to Kdu 2.7
Meta
- Meet the Team
Production Deployment
Most of the tips below are enabled by default if you are using Kdu CLI. This section is only relevant if you are using a custom build setup.
Turn on Production Mode
During development, Kdu provides a lot of warnings to help you with common errors and pitfalls. However, these warning strings become useless in production and bloat your app’s payload size. In addition, some of these warning checks have small runtime costs that can be avoided in production mode.
Without Build Tools
If you are using the full build, i.e. directly including Kdu via a script tag without a build tool, make sure to use the minified version (kdu.min.js
) for production. Both versions can be found in the Installation guide.
With Build Tools
When using a build tool like Webpack or Browserify, the production mode will be determined by process.env.NODE_ENV
inside Kdu’s source code, and it will be in development mode by default. Both build tools provide ways to overwrite this variable to enable Kdu’s production mode, and warnings will be stripped by minifiers during the build. All kdu-cli
templates have these pre-configured for you, but it would be beneficial to know how it is done:
Webpack
In Webpack 4+, you can use the mode
option:
|
But in Webpack 3 and earlier, you’ll need to use DefinePlugin:
|
Browserify
Run your bundling command with the actual
NODE_ENV
environment variable set to"production"
. This tellskduify
to avoid including hot-reload and development related code.Apply a global envify transform to your bundle. This allows the minifier to strip out all the warnings in Kdu’s source code wrapped in env variable conditional blocks. For example:
NODE_ENV=production browserify -g envify -e main.js | uglifyjs -c -m > build.js
Or, using envify with Gulp:
// Use the envify custom module to specify environment variables
var envify = require('envify/custom')
browserify(browserifyOptions)
.transform(kduify)
.transform(
// Required in order to process node_modules files
{ global: true },
envify({ NODE_ENV: 'production' })
)
.bundle()Or, using envify with Grunt and grunt-browserify:
// Use the envify custom module to specify environment variables
var envify = require('envify/custom')
browserify: {
dist: {
options: {
// Function to deviate from grunt-browserify's default order
configure: b => b
.transform('kduify')
.transform(
// Required in order to process node_modules files
{ global: true },
envify({ NODE_ENV: 'production' })
)
.bundle()
}
}
}
Rollup
|
Pre-Compiling Templates
When using in-DOM templates or in-JavaScript template strings, the template-to-render-function compilation is performed on the fly. This is usually fast enough in most cases, but is best avoided if your application is performance-sensitive.
The easiest way to pre-compile templates is using Single-File Components - the associated build setups automatically performs pre-compilation for you, so the built code contains the already compiled render functions instead of raw template strings.
Extracting Component CSS
When using Single-File Components, the CSS inside components are injected dynamically as <style>
tags via JavaScript. This has a small runtime cost, and if you are using server-side rendering it will cause a “flash of unstyled content”. Extracting the CSS across all components into the same file will avoid these issues, and also result in better CSS minification and caching.
Tracking Runtime Errors
If a runtime error occurs during a component’s render, it will be passed to the global Kdu.config.errorHandler
config function if it has been set.