Minifying your JavaScript and CSS helps reduce file sizes, improve load times, and enhance overall portal performance. In Power Pages, since you’re often working with Web Files or referencing external resources, it’s important to use optimized and minified assets.
What is Minification?
Minification removes unnecessary characters like:
- Whitespace
- Comments
- Line breaks
- Unused code
It keeps the code functional but much smaller.
How to Minify JavaScript and CSS
Option 1: Use Online Tools
Paste your code, download the minified version (.min.js, .min.css), and upload it as a Web File in Power Pages.
Option 2: Use VS Code Extensions
- Minify or Live Sass Compiler extensions allow real-time minification.
- File naming convention:
script.min.js,styles.min.css
Option 3: Use Build Tools (for advanced users)
- Use Gulp, Webpack, or Parcel to automate minification as part of your CI/CD pipeline.
- These tools can also bundle and tree-shake code for better optimization.
How to Use Minified Files in Power Pages
- Go to Power Pages > Web Files.
- Create a new Web File and upload your
.min.jsor.min.cssfile. - Set correct MIME types:
.js→application/javascript.css→text/css
- Reference in your page using Liquid:
<script src="{{ 'my-script.min.js' | webfile_url }}"></script> <link href="{{ 'styles.min.css' | webfile_url }}" rel="stylesheet" />
Best Practices
- Always minify before going live.
- Keep unminified (original) versions for editing and debugging.
- Combine multiple files into one to reduce HTTP requests.
- Use
.minsuffix to distinguish optimized files.
Security Tip
If using third-party libraries:
- Always host trusted libraries locally via Web Files.
- Avoid CDN links unless you’re using official sources (e.g.,
cdnjs,jsdelivr).
Summary
Minifying JavaScript and CSS is a simple but powerful way to improve portal speed and efficiency. Incorporate it into your deployment routine or build process for better performance at scale.