nuxtjs 优化

2019-11-27T17:37:20.295 | 浏览:241 | 文章类别: 前端

nuxtjs 优化

1. 字体的引用

在项目中 部分字体采用了比较好看的艺术字,但是艺术字体大部分用户电脑上都不会安装的。 所以, 需要进行服务端渲染来完成预期效果。 那怎么进行服务端字体渲染呢?
用到css3中的 @font-face属性, 这个属性可以自定义字体名称和自定义指定的字体文件。 用法如下:

@font-face {
  font-family: '苏新诗柳楷简';    // 自定义字体名称
  src: url('../../../fonts/SXSLKJ.svg#SXSLKJ') format('svg'),   // 自定义字体文件路径
  url('../../../fonts/SXSLKJ.ttf') format('truetype'),
  url('../../../fonts/SXSLKJ.woff') format('woff');
}

这样,就可以达到服务端渲染字体的效果了, 但是,可能你现在只要.ttf格式的文件, https://onlinefontconverter.com/, 这个网站可以帮助对生成不同字体的格式。

一般情况,现在已经可以在为安装艺术字体的客户端显示艺术字体了, 但是: 加载速度会比较慢,如果你的字体文件比较大的话,加载几十秒是完全没有问题的。
现在解决字体文件加载缓慢的问题。

font-spider的工作原理是这样的: 中文字体文件之所以很大,是因为英语只有26个字母,而中文的汉字有好多好多个,所以文件相对来说就会大很多。font-spider就是从你的css文件的@font-face入手,去查找字体,然后遍历你的html文件,通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。

1. 安装 font-spider 库

npm install font-spider -g

2. 在 @font-face 中一定要有.ttf文件指向。

3. 运行 font-spider 命令。

// 切换到项目根目录 
cd /home/pro/
// 执行命令,*.html是对所有html文件执行该命令,你也可以写具体name的html
font-spider  *.html

4. 执行完毕命令, 字体文件下会出现.font-spider文件夹。文件夹下的.ttf为你的原始文件。

2. 图片懒加载和图片压缩

https://blog.csdn.net/u013778905/article/details/85171723#Nuxt_23X_200

https://www.cnblogs.com/linjiangxian/p/11599501.html

3. nuxtjs打包分析

在nuxt.config.js文件中,

build: {
    /*
    ** Run ESLint on save
    */
   vendor: [],
    extend (config, { isDev, Client }, ctx) {
      ...
    },
    // 打包分析
    analyze: true,
    assetFilter: function(assetFilename) {
        return assetFilename.endsWith('.js');
    },
  }

4. css设置为外联样式(默认内联样式)

build: {
    /*
    ** Run ESLint on save
    */
   vendor: [],
    extend (config, { isDev, Client }, ctx) {
      ...
    },
    // 设置css为内联样式
    extractCSS: true
  }