用 Nuxtjs 生成 AMP 页面——使用 UIkit 前端框架

2019.01.15 更新:AMP 规范中有几个被允许用 link 标记以引用 CSS 和字体的域名

2019.01.15 更新:成功使用 PostCSS 插件实现按需引入 CSS

在本站启用了 AMP 插件之后,我深感 AMP 的响应速度之快,从而萌生了探寻用 Nuxt.js 开发生成 AMP 页面的想法。

正巧,nuxt.js 官方已经给出了一个样例—— with-amp

而我稍加修改(为适应现在的 AMP 页面规则)后:DemoMacro/nuxtjs-with-amp

仅仅是普通的 AMP 页面我自然是不满意的,由于我一直以来都很青睐 UIkit 的前端框架,所以我打算在 nuxtjs-with-amp 当中集成 UIkit。

AMP 规定不能直接引入CSS,所有的CSS样式都必须内联在页面当中,这对一直使用 Jsdelivr 的我造成了一定的困扰,也迫使我开始研究如何按需引入 CSS。

我一开始选择了 PurgeCSS 来作为一个 Webpack 插件来优化我的 CSS 大小。

不得不说,PurgeCSS 很强大,让 UIkit 的大小从上百 kb 压缩到几 kb。

然而,PurgeCSS 必须要提取出CSS后引入页面,也就是说做不到内联,故作罢。

(等我放弃了 AMP ,PurgeCSS 必定是我 Webpack 常备插件啊)

直接优化 CSS 的想法失败了,我便把主意打到了 模块化的 UIkit 源码上来,分别有 Less 和 Sass 两种形式。不巧,我都不懂。依样画葫芦地分别安装了 Less 和 Sass 的依赖,只有 Less 版本成功在 nuxt.js 里跑起来了,所以我就直接使用了 UIkit 的 Less 版本进行精简。

由于 UIkit 精简困难,以及 amp-sidebar 强制要求父节点为 body,但 nuxt.js 生成的页面默认被两个 div 包含,所以暂时搁置.

成功使用 PostCSS 插件:@fullhuman/postcss-purgecss,用以按需引入 CSS,同时我在项目中删除了 UIkit 中所有的 !important 限定符,使其符合 AMP 页面规则。

项目地址:DemoMacro/nuxtjs-with-amp-uikit

有能力的朋友可以帮忙完善这个项目。

AMP 中有几个被允许用 link 标记以引用 CSS 和字体的域名:

  • Fonts.com: https://fast.fonts.net
  • Google Fonts: https://fonts.googleapis.com
  • Bootstap CDN: https://maxcdn.bootstrapcdn.com
  • Typekithttps://use.typekit.net/kitId.css (replace kitId accordingly)

所以只要用 Bootstap CDN 就能使用 Bootstrap 的 CSS 啦,或许这才是AMP的正确食用姿势吧。

发表评论

电子邮件地址不会被公开。 必填项已用*标注