svelte-rollup-template
Svelte Rollup template with static asset hashing and minification.
This template enhances the post-build process of the official Svelte rollup template. The official template does not hash static assets (CSS/JS) when building for production.
The initial motivation was to address an issue about hashing file names for production.
Key Features
When building for production...
- CSS/JS files are hashed
- HTML is minified
This project uses PostHTML to process compiled assets after the build stage.
Getting Started
Clone the repository and install its dependencies.
git clone [email protected]:metonym/svelte-rollup-template.git
cd svelte-rollup-template
yarn install
Available Scripts
yarn develop
Runs the app in development mode with livereload enabled. Visit http://localhost:3000 to view the app.
The port number can be customized in rollup.config.js.
serve({
contentBase: ['build'],
- port: 3000
+ port: 8080
})
yarn build
Builds the app for production.
After the app is compiled to the build folder, the postbuild script script runs PostHTML on the static assets.
Asset Hashing
posthtml-hash hashes bundle.css and bundle.js.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Svelte Rollup Template</title>
- <link rel="stylesheet" href="bundle.css">
+ <link rel="stylesheet" href="bundle.b19ea05c629cee24e7b1.css">
</head>
<body>
- <script src="bundle.js"></script>
+ <script src="bundle.d84688974c6150c07e5f.js"></script>
</body>
</html>
Minification
htmlnano minifies build/index.html.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Svelte Rollup Template</title><link rel="stylesheet" href="bundle.b19ea05c629cee24e7b1.css"></head><body> <script src="bundle.d84688974c6150c07e5f.js"></script> </body></html>
Limitations
Currently, only CSS and JS files are hashed.
License
