前端开发者终其一生都在讨论一个问题，那就是提高性能并提高用户体验。那么想要提高性能可以从哪些地方入手呢？请看我细细道来。
压缩和最小化资源
1.JavaScript
// 安装
npm install uglify-js -g
// 使用UglifyJS压缩文件
uglifyjs input.js -o output.min.js
// 安装
npm install terser -g
// 使用Terser压缩文件
terser input.js -o output.min.js
2. CSS文件
// 安装
npm install cssnano -g
// 使用CSSNano压缩文件
cssnano input.css output.min.css
// 安装
npm install clean-css-cli -g
// 使用CleanCSS压缩文件
cleancss -o output.min.css input.css
// 安装webpack和TerserPlugin
npm install webpack webpack-cli terser-webpack-plugin --save-dev
在
webpack.config.js
文件中配置插件
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: 'bundle.min.js',
path: __dirname + '/dist'
},
optimization: {
minimize: true,
minimizer: [new TerserPlugin()],
},
};
3. 图像压缩
// 安装
npm install imagemin imagemin-pngquant imagemin-mozjpeg imagemin-svgo --save-dev
使用Imagemin压缩图像
const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminSvgo = require('imagemin-svgo');
(async () => {
await imagemin(['images/*.{jpg,png,svg}'], {
destination: 'dist/images',
plugins: [
imageminPngquant({
quality: [0.6, 0.8]
}),
imageminMozjpeg({
quality: 75
}),
imageminSvgo({
plugins: [
{removeViewBox: false}
]
})
]
});
console.log('Images optimized');
})();
使用内容分发网络(CDN)
CDN的原理
-
用户请求网站内容：当用户访问网站时，浏览器会发出请求来获取网页上的各种资源（如HTML、CSS、JavaScript、图片等）。
-
DNS解析：通过DNS解析，用户的请求会被重定向到最近的CDN节点，而不是直接访问原始服务器。
-
CDN节点响应请求：
-
用户获取资源：用户从最近的CDN节点获取资源，减少了传输时间和延迟。
CDN可以通过什么方式减少页面加载时间
-
减少物理距离：CDN在全球多个地点（称为节点）分布服务器，当用户请求资源时，CDN会从离用户最近的节点提供资源，从而减少传输延迟和加载时间。
-
负载均衡：CDN可以在多个服务器之间分配流量，避免单个服务器过载，确保所有用户都能快速访问资源。
-
缓存内容：CDN会将静态内容（如图片、CSS、JavaScript文件等）缓存到各个节点。当用户请求这些内容时，可以直接从缓存中获取，而不需要每次都从原始服务器获取，从而减少服务器压力和加载时间。
-
提高可用性和可靠性：由于CDN节点分布在多个地理位置，即使某些节点出现故障，其他节点仍然可以提供服务，确保高可用性和可靠性。
-
优化传输：CDN通常使用优化的传输协议和技术（如HTTP/2、TCP优化等）来提高传输效率，减少延迟。
-
减少带宽消耗：通过缓存和分发内容，CDN可以减少原始服务器的带宽消耗，使服务器能够更高效地处理动态内容和其他请求。
使用浏览器缓存
浏览器缓存通过存储本地副本的静态资源（如HTML、CSS、JavaScript、图像等），可以减少页面加载时间。当用户再次访问同一网站时，浏览器可以直接从本地缓存中加载这些资源，而不需要重新从服务器获取，从而减少网络请求、带宽消耗和延迟。
浏览器缓存的工作原理
-
首次请求：
-
缓存存储：
-
后续请求：
-
当用户再次访问同一网站时，浏览器会首先检查本地缓存是否有有效的副本。
-
如果缓存资源有效，浏览器会直接从本地缓存中加载资源。
-
如果缓存资源已过期或无效，浏览器会向服务器发送请求，获取最新的资源。
缓存策略
-
长期缓存：适用不频繁改变的资源
-
短期缓存：适用于频繁更新的资源
异步和延迟加载
异步和延迟加载是优化网页加载性能的关键技术，尤其适用于JavaScript文件。这些技术可以加快页面的初始加载速度，提升用户体验。
异步加载
异步加载（Asynchronous Loading）允许浏览器在下载JavaScript文件时继续解析HTML文档，而不会阻塞页面的渲染。可以通过在
标签中使用async属性来实现。
异步加载示例
异步加载示例
延迟加载
延迟加载（Deferred Loading）允许浏览器在下载JavaScript文件时继续解析HTML文档，并且等到HTML文档完全解析完毕后再执行脚本。可以通过在
标签中使用defer属性来实现。
-
脚本会在HTML文档完全解析完毕后执行。
-
脚本会按顺序执行（如果有多个defer脚本）。
延迟加载示例
延迟加载示例
vue中异步和延迟
异步组件加载
const AsyncComponent = () => import('./components/MyComponent.vue');
new Vue({
components: {
AsyncComponent
}
});
路由的懒加载
// 安装
npm install vue-router
// 路由配置中使用懒加载
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const routes = [
{
path: '/home',
name: 'Home',
component: () => import('./views/Home.vue') // 懒加载Home组件
},
{
path: '/about',
name: 'About',
component: () => import('./views/About.vue') // 懒加载About组件
}
];
const router = new Router({
routes
});
export default router;
监控和分析性能
Vue.config.performance = true;
还有其他点可以优化性能
-
图像懒加载
-
按需引入
-
减少DOM操作
-
减少HTTP请求数
-
使用服务器渲染
-
