-
减少入口文件体积：常用手段是路由懒加载，只有在解析路由的时候才会加载对应的组件，只加载当前组件所需要的js和css文件，减少不必要的文件请求；
代码：const UserDashboard = () => import(/* webpackChunkName: "group-user" */ './UserDashboard.vue')
但是入口文件还是把所有的js和css文件都引入了，这是为什么呢？
原因是vue-cli3默认会把所有通过import按需加载的JavaScript文件加上prefetch，link中的属性rel=”prefetch”，需要手动关掉；
代码：// vue.config.js
module.exports = {
chainWebpack: (config) => {
// 移除 prefetch 插件
config.plugins.delete("prefetch");
// 或者
// 修改它的选项：
config.plugin("prefetch").tap((options) => {
options[0].fileBlacklist = options[0].fileBlacklist || [];
options[0].fileBlacklist.push(/myasyncRoute(.)+?.js$/);
return options;
});
},
};
-
静态资源本地缓存：后端返回的资源（使用http缓存）；前端合理利用localstorage；cdn静态资源缓存；
-
UI框架按需加载
-
避免组件重复打包
-
图片资源压缩：将多个图片合并到一张图片中，只需要一次请求就可以将所需资源下载，减小建立连接的消耗，在移动端更明显；例如：精灵图
-
减少dom元素的数量；
-
减少cookies的大小：尽量减少cookies的体积对减少用户获得响应的时间十分重要；
-
减少http请求；
-
Webpack开启gzip压缩：不建议压缩图片，主要压缩HTML、css、JavaScript等静态文本条件；
代码：const CompressionWebpackPlugin = require("compression-webpack-plugin");
const isProduction = process.env.NODE_ENV === "production";
module.exports = {
//开启gzip
configureWebpack: (config) => {
if (isProduction) {
// 配置webpack 压缩
config.plugins.push(
new CompressionWebpackPlugin({
test: /.js$|.html$|.css$/,
// 超过4kb压缩
threshold: 4096,
})
);
}
},
};
-
首屏不需要展示的较大尺寸的图片，使用图片懒加载（vue-lazyload），优先加载可视区域的图片，其他部分等进入了可视区域再加载，提高性能；
代码：
main.jsimport VueLazyLoad from "vue-lazyload";
Vue.use(VueLazyLoad, {
preload: 1,
error: require("./error.jpg"), //错误图片
loading: require("./loading.jpg"), //加载中图片
attempt: 2,
});
vue 页面中的使用：v-lazy代替:src
背景图片使用图片懒加载 -
使用骨架屏skeleton screen：手写dom元素占位，真实数据到达则换掉，占位元素结构不多的情况下使用；
-
少用location.reload()：因为这个会刷新页面，页面所有的资源会重新请求服务器，建议使用location.href=”当前页URL”代替，使用location.href()浏览器会读取本地缓存资源；
-
CDN(content delivery network:内容分发网络)优化
-
合理使用缓存；
-
promise优化：promise的请求都是异步请求，浏览器在同一事件针对同一个域的请求是有一定数量限制的，超过限制数目的请求会被堵塞，Chrome浏览器在同一时间内向同域最多发起6个请求；而使用promise发送请求的原因是因为如果所有的异步请求同时触发的话，浏览器会为他们分配执行的优先级，而使用promise请求的顺序会按照我们调用的顺序进行，如果浏览器分配的话，可能会出现页面底部的请求先执行了；
-
SSR服务端渲染：服务器直接把内容全部拼好，直接输出，服务端使用一套模板引擎；
优点：SEO友好，首屏性能高；
缺点：客户端数据共享成本高，模板维护成本高；