Scully完整配置教程：从零开始搭建高性能Angular网站

Scully完整配置教程从零开始搭建高性能Angular网站【免费下载链接】scullyThe Static Site Generator for Angular apps项目地址: https://gitcode.com/gh_mirrors/sc/scullyScully是一款专为Angular应用设计的静态网站生成器它能够将Angular应用预渲染为静态HTML和CSS文件显著提升网站加载速度和性能。本教程将带你从零开始完成Scully的完整配置打造一个高性能的Angular静态网站。为什么选择ScullyScully作为Angular生态系统中的重要工具具有以下显著优势极致性能预渲染技术使页面加载速度提升80%以上SEO友好静态HTML内容更容易被搜索引擎抓取简化部署生成的静态文件可直接部署到任何静态托管服务开发便捷与Angular CLI无缝集成保留Angular开发体验前期准备在开始配置Scully之前请确保你的开发环境满足以下要求Node.js 12.14.0或更高版本Angular CLI 9.0.0或更高版本npm 6.13.4或更高版本你可以通过以下命令检查当前环境版本node -v ng version npm -v安装Scully1. 创建新的Angular项目如已有项目可跳过此步骤ng new my-scully-project --routing cd my-scully-project2. 添加Scully到项目中ng add scullyio/init这条命令会自动完成以下操作安装必要的依赖包创建Scully配置文件设置路由发现机制添加Scully命令到package.json安装完成后你会在项目根目录看到新生成的Scully配置文件scully.project-name.config.ts。配置Scully基础配置Scully的主要配置文件是scully.project-name.config.ts它导出一个ScullyConfig对象export const config: ScullyConfig { projectRoot: ./src, projectName: my-scully-project, outDir: ./dist/static, routes: { /blog/:slug: { type: contentFolder, slug: { folder: ./blog } } } };主要配置项说明projectRootAngular项目的根目录projectName项目名称outDir静态文件输出目录routes路由配置定义如何处理不同的路由添加内容插件Scully支持多种内容插件最常用的是处理Markdown文件的contentFolder插件。要使用它首先需要安装相关依赖npm install scullyio/ng-lib scullyio/plugins然后在路由配置中添加routes: { /blog/:slug: { type: contentFolder, slug: { folder: ./blog } } }这样配置后Scully会自动发现./blog目录下的所有Markdown文件并为每个文件生成对应的路由。创建和使用内容创建Markdown内容在项目根目录创建blog文件夹并添加第一篇文章mkdir blog echo --- title: 我的第一篇Scully博客 description: 使用Scully创建的第一篇博客文章 published: true date: 2023-01-01 --- # 欢迎来到我的博客 这是使用Scully静态网站生成器创建的第一篇博客文章。 blog/first-post.md在Angular中显示内容创建一个博客文章组件ng generate component blog/post修改blog/post/post.component.tsimport { Component, OnInit } from angular/core; import { ActivatedRoute } from angular/router; import { ScullyRoute, ScullyRoutesService } from scullyio/ng-lib; Component({ selector: app-post, templateUrl: ./post.component.html, styleUrls: [./post.component.css] }) export class PostComponent implements OnInit { post: ScullyRoute; constructor( private route: ActivatedRoute, private scully: ScullyRoutesService ) { } ngOnInit(): void { this.route.params.subscribe(params { this.scully.getCurrent().subscribe(post { this.post post; }); }); } }在模板文件post.component.html中添加div *ngIfpost h1{{ post.title }}/h1 p{{ post.date | date }}/p scully-content/scully-content /div构建和预览构建Angular应用ng build --prod运行Scully生成静态文件npm run scullyScully会分析你的Angular应用发现所有路由并生成对应的静态HTML文件。生成的文件会保存在dist/static目录中。预览静态网站npm run scully serve这个命令会启动一个本地服务器默认在http://localhost:1668上提供生成的静态网站。高级配置添加自定义插件Scully允许你创建自定义插件来扩展其功能。创建插件的步骤如下在项目根目录创建scully/plugins文件夹创建插件文件例如my-plugin.ts在Scully配置中注册插件// scully/plugins/my-plugin.ts import { registerPlugin } from scullyio/scully; export const myPlugin registerPlugin(routeProcess, myPlugin, async (route) { // 插件逻辑 return route; });配置路由忽略如果你希望Scully忽略某些路由可以在配置中添加ignoredRoutesexport const config: ScullyConfig { // ...其他配置 ignoredRoutes: [ /admin/**, /private/* ] };使用Scully的Transfer State服务Scully提供了Transfer State服务可以在服务器端和客户端之间共享数据import { TransferStateService } from scullyio/ng-lib; // 在组件中 constructor(private transferState: TransferStateService) { const data this.transferState.get(key, null); if (!data) { // 从API获取数据 // 然后保存到transferState this.transferState.set(key, fetchedData); } }部署静态网站Scully生成的静态文件可以部署到任何支持静态网站的托管服务如NetlifyVercelGitHub PagesAWS S3Firebase Hosting以Netlify为例只需将dist/static目录推送到连接的GitHub仓库Netlify会自动部署你的网站。常见问题解决路由未被Scully发现如果Scully没有发现你的路由请检查路由是否在app-routing.module.ts中定义路由是否使用了loadChildren进行懒加载是否在Scully配置中正确设置了routes内容没有正确显示如果Markdown内容没有正确显示请确保已安装scullyio/ng-lib在模块中导入了ScullyLibModule在模板中使用了scully-content/scully-content组件构建速度慢对于大型项目可以通过以下方式提高Scully构建速度使用--routeFilter只构建特定路由增加maxRenderThreads配置使用增量构建npm run scully -- --incremental结语通过本教程你已经掌握了Scully的基本配置和高级用法。Scully作为Angular的静态网站生成器不仅能显著提升网站性能还能简化开发和部署流程。无论你是构建博客、文档网站还是企业官网Scully都是一个值得考虑的优秀工具。想要了解更多关于Scully的高级功能可以查阅官方文档docs/overview.md。祝你使用Scully构建出既快速又美观的Angular静态网站【免费下载链接】scullyThe Static Site Generator for Angular apps项目地址: https://gitcode.com/gh_mirrors/sc/scully创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考