本文会讲解决Nuxt首页加载慢、Nuxt的速度优化、Nuxt的性能优化、Nuxt的加载优化、Nuxt的首页加载优化、Nuxt的白屏优化、Nuxt的打包优化等集合。
- 优化前
- 优化后
这里我总结一下关于我博客的优化,如何提升这么多的。
1.按需引入UI框架,我这里使用的是Element-UI
- 先安装依赖(按需引入才需要)
npm i babel-plugin-component
// or
yarn add babel-plugin-component
- 在plugins下的element-ui.js写入
import Vue from 'vue'
import { Button, Input, Row, Col } from 'element-ui'
Vue.use(Row);
Vue.use(Col);
Vue.use(Input);
Vue.use(Button)
Vue.prototype.$loading = Loading.service;
- 在nuxt.config.js中写入
module.exports = {
// ...
css: [
'element-ui/lib/theme-chalk/index.css'
],
plugins: [{ src: '@/plugins/element-ui' }],
build: {
vendor: ['element-ui'],
transpile: [/^element-ui/],
babel: {
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
},
}
// ...
}
2.减少使用到的package.json的包
什么意思呢?就是说例如我博客,之前为了花里胡哨,加了animate.css等动画效果,其实用处并不大,去掉并减少消耗性能,大家可以检查一下相关的npm包。
3.不使用内联样式,使用scss的全局变量,全局样式,减少多个页面重复的css
4.请求分开服务端渲染及客户端渲染,并尽可能的减少请求
-
我首页有3个接口,其中1个接口需要seo,那么就使用asyncData或者fetch去服务端渲染,其他接口则在mounted里请求。
-
因为服务器的开销非常大,而且是同步去执行异步加载,所以为什么首页白屏这么久就是这个原因,可以减少服务器压力,分开请求,不需要seo的放到客户端去请求。
async fetch() {
const data = {
pageNum: 0,
pageSize: 0,
};
await queryArticle(data).then((res) => {
this.articleData = res.list;
});
},
mounted() {
this.getTags();
},
methods: {
// 获取标签
getTags() {
queryTags({ pageNum: 0, pageSize: 0 }).then((res) => {
this.tagItems = res.list;
});
},
},
5.配置nginx的Gzip、http2
# ...
http {
# gzip模块设置,使用 gzip 压缩可以降低网站带宽消耗,同时提升访问速度。
gzip on; #开启gzip
gzip_min_length 1k; #最小压缩大小
gzip_buffers 4 16k; #压缩缓冲区
gzip_http_version 1.0; #压缩版本
gzip_comp_level 2; #压缩等级
gzip_types text/plain text/css text/xml text/javascript application/json application/x-javascript application/xml application/xml+rss font/ttf font/otf image/svg+xml;#压缩类型
server {
listen 443 ssl http2;
# ...
}
# ...
}
配置好后可以在浏览器F12的networks查看Content-Encoding是否有gzip
或者在Headers下查看
查看http2
打开f12的network,图片红色框框头部右键点开Protocol,即可查看了
6.有用到图片的全部压缩并转成webp格式,如果你们需要兼容IE,那么得再做兼容处理了,我这里就是直接使用webp格式的图片。
7.nuxt项目也开启gzip、br
- 先安装nuxt-precompress
yarn add nuxt-precompress
- 在nuxt.config.js中写入
module.exports = {
// ...
modules: [
'nuxt-precompress',
],
nuxtPrecompress: {
gzip: {
enabled: true,
filename: '[path].gz[query]',
threshold: 10240,
minRatio: 0.8,
compressionOptions: { level: 9 },
},
brotli: {
enabled: true,
filename: '[path].br[query]',
compressionOptions: { level: 11 },
threshold: 10240,
minRatio: 0.8,
},
enabled: true,
report: false,
test: /\.(js|css|html|txt|xml|svg)$/,
// Serving options
middleware: {
enabled: true,
enabledStatic: true,
encodingsPriority: ['br', 'gzip'],
},
},
// ...
}
- yarn build后,打开.nuxt > dist > client,看一下是否有.br或者.gz结尾,说明成功。
8.nuxt再次压缩包体积CompressionPlugin及optimization
- 先安装compression-webpack-plugin
yarn add compression-webpack-plugin
- 在nuxt.config.js中写入
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
// ...
build: {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css/, // 匹配文件名
threshold: 10240, // 对超过10kb的数据进行压缩
deleteOriginalAssets: false // 是否删除原文件
})
],
optimization: {
minimize: true,
splitChunks: {
chunks: 'all',
automaticNameDelimiter: '.',
name: true,
minSize: 10000,
maxSize: 244000,
cacheGroups: {
vendor: {
name: 'node_vendors',
test: /[\\/]node_modules[\\/]/,
chunks: 'all',
maxSize: 244000
},
styles: {
name: 'styles',
test: /\.(css|vue)$/,
chunks: 'all',
enforce: true
},
commons: {
test: /node_modules[\\/](vue|vue-loader|vue-router|vuex|vue-meta|core-js|@babel\/runtime|axios|webpack|setimmediate|timers-browserify|process|regenerator-runtime|cookie|js-cookie|is-buffer|dotprop|nuxt\.js)[\\/]/,
chunks: 'all',
priority: 10,
name: true
}
}
}
},
}
// ...
}
经过以上操作后,基本上没有其他问题了,第一次接触webpack,应该是还可以优化的。