日常开发网页经常会使用一些特殊字体,比如思源黑体、苹方字体等,因为这些字体在一般的宿主环境中是不存在的,需要通过 css 的 @font-face 定义,并从服务器中加载对应的字体文件,而字体文件一般都是比较大的,甚至有时候一个字体比其他所有的资源(js、css、图片)加起来还要大,对网页的加载性能起到非常关键的影响,因此有必要对字体进行一些优化。 本文主要从字体格式、按需提取、统一渲染三个方面来谈谈优化字体的常用技巧。
安利下:《next.js静态页面渲染技术(静态生成和服务端渲染):BSR/SSG/SSG》
这两个问题可以从很多方面进行优化,今天我就从前端页面部署阶段来优化一下这两个问题。PS:以下内容都基于vue-cli3+。
最近有一个小项目,打算使用 next.js 框架来做。这是我第一次使用该框架,没有太多的经验。按照官方的方法,初始化好项目,然后就能跑起来了。
众所周知,相对于英文字体,中文字体天生是“庞然大物”。英文字体两三百KB已经很大了,而中文字体几MB十几MB都算小的。一方面,中文字体包含的字形数量极多,动辄数以千计甚至万计,而英文字体则只需包含几十个基本字符和符号,哪怕支持多种语言及字符变体,容量达到三千多个字形已经算非常庞大的了。另一方面,中文字形的曲折变化复杂度高,在基于轮廓的矢量字体设计中,用于控制中文字形曲线的控制点普遍比英文更多,因而需要的数据量更大,也会导致字体文件膨胀。
最近TWaver 3D机房项目打算使用Ant Design来重构后端管理页面,Ant Design 团队不是很熟悉,webpack react等用的不多,所以自己花了一天时间,把相关知识点撸了一遍,给团队做了个培训。 下面主要是一个培训的纲领,整个流程可以通畅的跑下来; 主要是webpack+es2015+react+Ant Design。 当然,ant design 自己有一套框架 打包平台,有兴趣的也可以研究。
babel-preset-env是一个新的预设,可以让你指定一个环境并自动使能需要的插件。 支持拥有超过1%市场份额的浏览器
webpack 是一个模块打包工具,不仅可以减少网络流量,还能减少服务器请求,减轻服务器压力。
安装webpack 和 webpack-cli 到项目开发依赖,这里我选择的版本是最新版本。
SSR(Server-Side Rendering,服务器端渲染)是指将 React、Vue、Angular 等客户端渲染的应用在服务器端执行一次,然后将渲染结果返回给浏览器进行展示的过程。相对于客户端渲染(CSR,Client-Side Rendering),SSR 可以提高页面的首屏加载速度和搜索引擎优化(SEO),因为它可以在服务器端直接生成 HTML,并将静态资源(如 CSS、JavaScript 等)和页面数据一起返回给客户端,从而减少客户端的渲染工作量。
我们的网站简单来说分为 2 种数据资源,一种是动态的数据,即 PHP 等程序语言实时吐出来的数据,在网页内容上主要是 HTML 代码,另一种则是静态资源,比如图片、css、js、视频等(当然,图片等资源也可能是实时动态生成的,比如 PHP 缩略图,这里就不展开讨论了)。
Next.js 是由 Vercel 团队研发的一款全栈应用开发框架,我们使用 Next.js 开发前端页面以及一些轻量级的后端 API,前端和后端都用 Javascript 技术栈,并且是前后端一体化的(在同一个项目中开发前后端)。另一个被大家所熟知的特性是它的服务端渲染能力,对 SEO 友好。Vercel 自身是一个用户体验极佳的 Serverless 平台,支持包括 Next.js 在内的几十种开发框架一键部署到 Vercel 平台。Vercel 平台自身拥有极强的适配扩展能力,第三方框架可以按照 Vercel 平台的适配规则自主进行适配。作为 Vercel 亲儿子的 Next.js 可以完美适配 Vercel 平台,通过 Next.js + Vercel,让开发和部署都能拥有极致的体验。Vercel 团队信奉着“吃自己的狗粮”原则,很多应用都是基于自己的工具和平台开发的。
一直以来又一个困惑,就是网站本身没有js错误,但是状态栏一致在提示有错误,相对于本站也有一个类似的错误,那就是404,简单的看了下,一致在显示.woff页面错误,然后打开了网站错误页的详情,才知道是因为服务器IIS不认SVG,WOFF/WOFF2 这几个文件类型,只要在IIS上添加MIME 类型即可。
less 编写的代码无法直接运行,需要通过 less-loader 插件转换成 css 代码,再用 webpack 打包后,浏览器才能正常打开。
当使用 React 开发系统的时候,常常需要配置很多繁琐的参数,如 Webpack 配置、Router 配置和服务器配置等。如果需要做 SEO,要考虑的事情就更多了,怎么让服务端渲染和客户端渲染保持一致是一件很麻烦的事情,需要引入很多第三方库。针对这些问题,Next.js提供了一个很好的解决方案,使开发人员可以将精力放在业务上,从繁琐的配置中解放出来。下面我们一起来看看它的一些特性。
GitHub pages is a hosting provider for static pages. You can't host APIs on it. If you really want to host on GitHub pages you'll want to use https://github.com/zeit/next.js#static-html-export and not use API routes.
感谢@荒野孤灯提供的woff2文件,大家需要下载的话F12--Network找到hm.woff2下载即可~
注意:在一个模块中,只允许使用export default向外默认暴露一次成员,不能写多个export default,否则会报错
来记录下学习(踩坑)的过程,这篇文章的代码都在https://github.com/Maricaya/nextjs-blog-1啦。
Varlet提供了一些常用的图标,图标都来自 Material Design Icon。
网站的性能一直是前端工程师努力的方向之一,更加流畅的体验,更加快速的页面呈现,都是好的web网站的指标之一。
SSR相对于静态页面是非常消耗服务器资源的,所以在网站访问量较大时通常会将前端页面进行缓存,在Next.js中我们需要渲染AJAX的内容需要在前端使用getServerSideProps进行动态内容的渲染。很多网页的数据变化不是很频繁通常不需要每次都发起请求和渲染,所以本文来讲解如何缓存Next.js渲染的SSR页面。如果有同学不清楚服务器缓存的原理可以看之前发布的Express使用服务端缓存。
3、在config/index.js文件修改build属性下面的assetsPublicPath: '/xxx/'(用Cli3搭建的项目,应该是在vue.config.js文件修改publicPath: '/xxx/');
参考代码:https://github.com/chkui/nextjs-getting-started 。
本文分为三个部分:字体加载、字体交付和字体呈现。每一节都解释了字体生命周期的那个特定方面是如何工作的,并提供了相应的最佳实践。
很久没写文章了,博客已经长草了,今天挤点时间分享一些小干货,也是回应一下不少站长朋友的留言问题。 有不少站长朋友问张戈博客的静态文件为啥是另外一个域名?有啥好处?如何实现? 其实这算是一种动静分离的做
Express 是基于 Node.js 平台,快速、开放、极简的 Web 开发框架 通俗的理解:Express 的作用和 Node.js 内置的 http 模块类似,是专门用来创建 Web 服务器的。 本质就是一个 npm 上的第三方包,提供了快速创建 Web 服务器的便捷方法 中文官网 http://www.expressjs.com.cn/
现在想要在CSS中使用自定义字体或者第三方字体,是一件非常简单的事情,只需要简单的使用@font-face规则即可导入各种字体文件。
随着当前 Web 技术的日新月异,网页界面内容越来越丰富,让人眼花缭乱,其中就包括了网页中的各种自定义字体。
先解释一下Nuxt.js和Next.js虽然只有一个字母之差,但它们是不同的两个服务端渲染框架.
版权声明:原创不易,多多珍惜 https://blog.csdn.net/wonaixiaoshenshen/article/details/89080861
原文:Build a React + Flux App with User Authentication 译者:nzbin 译者的话:这是一篇内容详实的 React + Flux 教程,文章主要介绍了如何使用 API 获取远程数据以及如何使用 JSON Web Tokens 进行用户身份认证。在阅读本文之后,我一直使用文章介绍的方法,通过搭建 Node 服务器,模拟接口数据进行前端开发。这篇文章发表于 2016 年 5 月,我是去年读的本文,但迟迟没有翻译,而现在准备重新学习 React ,所以把这篇文章翻
文档:http://www.expressjs.com.cn/ 菜鸟教程:http://www.runoob.com/nodejs/nodejs-express-framework.html
React SSR 是什么?React SSR 是 React 服务器端渲染 (SSR: server side render) 技术。传统的服务端渲染方式是使用 HTML 模板的方式渲染出来的。访问数据库,拿到数据然后将数据填充到 HTML 模板上,比如 Node.js 中的 pug 模板引擎、ejs 模板引擎等都是服务端渲染的模板。传统的服务端渲染通常用在文档型页面上,而现在网页被称为 web app,页面更像 app 应用,现在做服务器渲染主要是为了 SEO 和首屏。React 与模板渲染很相似,都是通过数据驱动,将页面渲染出来。
我们在使用webpack打包的时候经常因为引入ttf字体报错而烦恼,这里解决ttf字体报错的方法需要加入一个url-loader,没有的话需要npm先安装下:
React 的生态系统很大,为了解决 React 中比较困难的问题,你可以选择多种模块。大多数实际的 React 应用程序都有一些共同的需求,这些需求主要包括状态管理及路由。而解决这些需求最常用的是 Flux 及 React Router。
WordPress博客的加速可以说是老生常谈了,在这里我分享一下我博客的分享技术。 我采用的加速技术主要是wordpress的缓存插件,动静分离和腾讯云CDN。
首先下载ArcGIS API for JavaScript4.x,这里下载的是4.19。
SSR 顾名思义就是 Server-Side Render, 即服务端渲染。原理很简单,就是服务端直接渲染出 HTML 字符串模板,浏览器可以直接解析该字符串模版显示页面,因此首屏的内容不再依赖 Javascript 的渲染(CSR - 客户端渲染)。
如今很多搬运工直接复制搬运原创网站的内容,让原创作者很头痛,本文来聊聊通过服务器配置杜绝盗取行为!
在实际的网站部署中,可能需要在同一个服务器上同时启动多个服务,比如一个 Tomcat,端口为 8080,和一个 Jetty,端口为 8081。由于域名解析时只能解析到默认的 80 端口,所以这时想要通过两个域名分别访问同一个服务器上的两个不同端口的服务,就需要用到 nginx 。
Hi,我是 ssh,今天给大家分享一篇关于 Next.js 的吐槽。作为一个想要产品化的框架,提供一致的 API 和易用性是必不可缺的。但是 Next 不知道是傲慢还是疏忽,让框架开发者 Pilcro
1. Hash:和整个项⽬的构建相关,只要项⽬⽂件有修改,整个项⽬构建的 hash 值就会更改,一般用于图片设置;
家人们好,我们在工作生活中经常需要画些图,我们往期了已经出过draw-io私有化部署的文章了,今天我要向大家介绍一款名为 Excalidraw 的绘图工具,这款工具了我个人非常喜欢使用,是因为它可以修改成类似于手写体的字体,并且可以直接绘画,这篇文章我将分享如何使用 Docker Compose 轻松部署 Excalidraw。
通过CSS属性@font-face和font-family可以实现加载自定义web font,改变网页字体,实现美化效果。
当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要(依赖)的每个模块(modules),然后将所有这些模块打包成一个或多个 assets。
如您所知,用于在现代网站上构建页面的HTML,CSS和JavaScript文件可能非常庞大。在大多数情况下,Web服务器可以即时压缩这些和其他文本文件,以节省网络带宽。
如今很多搬运工直接复制搬运原创网站的内容,让原创作者很头痛,本文来聊聊通过服务器配置杜绝盗取行为! -配置要求: 1、CentOS系统服务器 2、AppNode管理面板 -配置步骤: 纯净CentOS系统使用工具Xshell连接服务器,输入以下命令安装AppNode管理面板; INSTALL_AGENT=1 INIT_SWAPFILE=1 bash -c "$(curl -sS http://dl.appnode.com/install.sh)" image.png 安装完成后登录管理面板,进入软件管
领取专属 10元无门槛券
手把手带您无忧上云