1.优化文件大小
nuxt.config.js
module.exports = {
...
/* ** Plugins to load before mounting the App */ plugins: [ { src: "@/plugins/element-ui.js", ssr: false // 关闭ssr }, { src: "@/plugins/vant.js", ssr: true } ], /* ** Build configuration */ build: { /* ** You can extend webpack config here */ optimization: { splitChunks: { minSize: 50000, maxSize: 250000 } }, analyze: true, productionSourceMap: false, productionGzip: true, productionGzipExtensions: ['js', 'css', 'svg'], vendor: ['@/plugins/element-ui', '@/plugins/vant'], babel: { plugins: [ ["component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] }, },
...
}
在plugins目录下创建插件引入的js
element-ui.js 按需加载element-ui插件
import Vue from 'vue';// 按需引入 Element 组件import { Checkbox, Image } from 'element-ui';const elementUIs = [Checkbox, Image];const Element = { install (Vue) { elementUIs.forEach(elementUI => [ Vue.component(elementUI.name, elementUI) ]) }}Vue.use(Element)
vant.js 按需加载vant的插件
import Vue from 'vue'// 自动按需引入 Vant 组件import { NavBar, Popup, Step, Field, PasswordInput, NumberKeyboard, Dialog, Toast } from 'vant'const vantUIs = [NavBar, Popup, Step, Field, PasswordInput, NumberKeyboard, Dialog, Toast]const Element = { install (Vue) { vantUIs.forEach(vantUI => [ Vue.component(vantUI.name, vantUI) ]) }}import "../node_modules/vant/lib/style/base.css";import "../node_modules/vant/lib/overlay/index.css";import "../node_modules/vant/lib/icon/index.css";import "../node_modules/vant/lib/step/index.css";import "../node_modules/vant/lib/nav-bar/index.css";import "../node_modules/vant/lib/field/index.css";import "../node_modules/vant/lib/popup/index.css";import "../node_modules/vant/lib/number-keyboard/index.css";import "../node_modules/vant/lib/password-input/index.css";import "../node_modules/vant/lib/dialog/index.css";import "../node_modules/vant/lib/toast/index.css";import '@/assets/scss/vant.scss'Vue.use(Element).use(Dialog)
2.优化图片大小
阿里云的图片处理操作：
服务端
const acceptImgs = (req.headers['accept'] || '').toLowerCase(); // 浏览器能够识别的类型的文件 const isWebp = acceptImgs.indexOf('image/webp') > -1;
客户端
const isSupportWebp = function () { try { return document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0; } catch (err) { return false; }}
3.优化接口大小
定制化接口，去除冗余数据，接口的响应时长控制在200-500ms以内
