优化前:
优化后:
1. 按需引入UI框架,我这里使用的是Element-UI
- 安装依赖(按需引入)
npm i babel-plugin-component
// or
yarn add babel-plugin-component
- 在plugins下的element-ui.js写入
import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
Vue.use(Element, { locale })
- 在nuxt.config.js中写入
css: [
'element-ui/lib/theme-chalk/index.css'
],
plugins: [
'@/plugins/element-ui',
]
build: {
vendor: ['element-ui'],
transpile: [/^element-ui/],
babel: {
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
},
}
2. 删除没有使用的依赖
就是把没有使用的npm包
卸载掉
npm uninstall 包名
3. 请求分开服务端渲染及客户端渲染,并尽可能的减少请求
通用接口:尽量使用Vuex store
服务端渲染:写在asyncData
中
客户端渲染:写在mounted
中
4. 配置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;
# ...
}
# ...
}
5. nuxt项目也开启gzip、br
- 安装nuxt-precompress
npm i nuxt-precompress
// or
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'],
},
},
// ...
}
npm run build后,打开.nuxt > dist > client,看一下是否有.br或者.gz结尾,说明成功。
6. nuxt再次压缩包体积CompressionPlugin及optimization
- 安装compression-webpack-plugin
npm i compression-webpack-plugin
// or
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
}
}
}
},
}
// ...
}
以上做了一个简单的优化,应该还可以继续优化