前端如何进行优化性能，让用户体验更加顺畅？
前言
现在很多产品都是C端的产品，而大部分公司的核心业务就是C端的客户群体，个别的公司的核心是B端，那么C端的客户就是他们为B端客户最好的贡献者，至于其中奥秘懂得自然懂。
那么既然大部分公司的核心是C端，C端又分为很多产品比如WEB网址，小程序，APP，Windows应用等等。而现在WEB产品还是大部分的主流产品，使用很多的前端框架就是VUE,UIAPP,REACT。而现在的开发模式都是前后端分离开发，那么今天我就为大家分享一下我对VUE项目的前端的性能优化方案。
为什么要优化呢？
玩过服务器的小伙伴们应该知道服务的带宽是有限制，而很多公司会去选择轻量云服务器，这里简单介绍一下什么是轻量云服务器。轻量云服务器的带宽流量就是有限制的，而服务器的配置不能进行单一升级，比如我想升级一下带宽这样就是不可以的，但是在服务器中就是可以，可以进行单一配置升级。而且服务器的带宽是非常的昂贵的，比如1M的带宽这样用户访问你的网站的时候速度就会很慢很慢，如果是动态网站的话等完整的页面渲染出来估计大概要10秒以上。那么我们就可以对其前端的build生成代码进行压缩，配置nginx的压缩率。对资源进行压缩已达到提升前端用户访问页面的速度，减少页面的渲染时间。
废话就不多说了，直接开始上代码
VUE项目优化
相信大家搞VUE开发的应该都知道webpack这个东西吧，现在vue的脚手架的最新版本就是5.0.3版本
使用命令
vue create app
创建的项目目录就会简单很多很多，
目录就是public src没了
所有的vue配置都集成到了vue.config.js中，在这里可以配置整个项目的所有配置包括webpack
详细配置可以参考我的上一篇文章，vue.config.js配置注释详解
今天就介绍一下几个对前端项目的优化的小中间件，
第一就是uglifyjs-webpack-plugin,它是用来干嘛的呢？它是用来对代码进行压缩的，并可以配置在生产模式下取消项目中的console.log打印
安装命令：
yarn add -D uglifyjs-webpack-plugin 或 npm install uglifyjs-webpack-plugin -save -dev
在项目中引入和使用
//打包配置自动忽略console.log等
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//启用代码压缩
plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_console: true,
drop_debugger: false,
pure_funcs: ["console.log"] //移除console
}
},
sourceMap: false,
parallel: true
})
),
详细使用说明：uglifyjs-webpack-plugin - npm (npmjs.com)
但是这个插件好像挺久的了，推荐一个新的terser-webpack-plugin
const Webpack = require('webpack')
// 引入该插件
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 引入压缩插件
const TerserPlugin = require('terser-webpack-plugin')
// 匹配此 {RegExp} 的资源
const productionGzipExtensions = /\.(js|css|json|ttf)(\?.*)?$/i
module.exports = {
transpileDependencies: ['vuetify'],
assetsDir: 'assets', // 静态资源目录(js,css,img,fonts)这些文件都可以写里面
productionSourceMap: false,
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
filename: '[path][name].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 0,
minRatio: 0.8,
}),
new Webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
optimization: {
minimizer: [
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'], // 移除console
},
},
}),
],
},
},
}
详细使用说明：terser-webpack-plugin - npm (npmjs.com)
第二个就是 compression-webpack-plugin，对资源进行压缩
安装命令：
yarn add -D compression-webpack-plugin 或 npm install compression-webpack-plugin -save -dev
在项目中引入和使用:
const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按需引用
plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,//大于10k的进行压缩
minRatio: 0.8,
})
);
第三个就是html-webpack-plugin对面的html进行处理，对seo比较友好一点点
安装命令：
yarn add --dev html-webpack-plugin 或 npm i --save-dev html-webpack-plugin
在项目中引用
const { resolve } = require('path')//nodejs 方法
const HtmlWebpackPlugin = require('html-webpack-plugin')
export.moduls= {
entry: {
one: ['./src/index1.js', './src/index2.js'],
two:'./src/indexTwo.js'
},
mode: 'development',
output: {
filename: '[name].js',
path: resole(_dirname, 'build')
},
module: {
rules: []
},
plugins: [
//默认：创建空的html 自动引入打包的资源（js css）
// template 自定义设置入口html filename 自定义文件名
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
collapseWhitespace: true, //html打包去除空格
removeComments: true // 移除注释
},
chunks:['one'], //指定引用的js
})
]
}
第四个就是purgecss-webpack-plugin移除多余没有使用的css样式代码
安装命令：
yarn add -D purgecss-webpack-plugin 或 npm install purgecss-webpack-plugin -save -dev
在项目中引用
//用于生产环境去除多余的css
const PurgecssPlugin = require("purgecss-webpack-plugin")
//去掉不用的css 多余的css
plugins.push(
new PurgecssPlugin({
paths: glob.sync([path.join(__dirname, "./**/*.vue")]),
extractors: [
{
extractor: class Extractor {
static extract(content) {
const validSection = content.replace(
/+/gim ,
""
);
return validSection.match(/[A-Za-z0-9-_:/]+/g) || [];
}
},
extensions: ["html", "vue"]
}
],
whitelist: ["html", "body"],
whitelistPatterns: [/el-.*/],
whitelistPatternsChildren: [/^token/, /^pre/, /^code/]
})
);
这个插件我个人是感觉不怎么好用，所以推荐大家另外一款插件 optimize-css-assets-webpack-plugin webpack5.0以上的高版本用 css-minimizer-webpack-plugin
由于我的webpack是5.x的高版本我就使用 css-minimizer-webpack-plugin来处理css代码
安装命令：
yarn add -D purgecss-webpack-plugin 或 npm install css-minimizer-webpack-plugin --save-dev
在项目中引用
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // 使用css-minimizer-webpack-plugin
plugins.push(
new CssMinimizerWebpackPlugin()
)
//我这里使用了默认配置，个人感觉默认的就够用了
更多使用说明：css-minimizer-webpack-plugin - npm (npmjs.com)
第五个就是mini-css-extract-plugin它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。它支持CSS和SourceMaps的按需加载。
安装命令：
yarn add -D mini-css-extract-plugin 或 npm install --save-dev mini-css-extract-plugin
项目中应用：
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins.push(
new MiniCssExtractPlugin({
linkType: "text/css",
})
)
//这里我也使用了默认配置
更多使用说明：mini-css-extract-plugin - npm (npmjs.com)
最后上一张完成的优化过程截图
最后附上完整的vue.config.js代码
const { defineConfig } = require('@vue/cli-service')
const path = require('path');
const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按需引用
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩， 按需写入
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const resolve = (dir) => path.join(__dirname, dir);
const TerserPlugin = require('terser-webpack-plugin')//去除多余的console.log
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin"); // 使用css-minimizer-webpack-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//为每个css生成一个单独css文件，俗称分片
module.exports = defineConfig({
transpileDependencies: true,
assetsDir: 'static',
productionSourceMap: false,
integrity: true,
crossorigin: undefined,
chainWebpack: config => {
config.resolve.symlinks(true); // 修复热更新失效
// 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
config.plugin("html").tap(args => {
// 修复 Lazy loading routes Error
args[0].chunksSortMode = "none";
return args;
});
config.resolve.alias // 添加别名
.set('@', resolve('src'))
.set('@assets', resolve('src/assets'))
.set('@components', resolve('src/components'))
.set('@views', resolve('src/views'))
.set('@store', resolve('src/store'));
// 压缩图片
// 需要 npm i -D image-webpack-loader
config.module
.rule("images")
.use("image-webpack-loader")
.loader("image-webpack-loader")
.options({
mozjpeg: { progressive: true, quality: 65 },
optipng: { enabled: false },
pngquant: { quality: [0.65, 0.9], speed: 4 },
gifsicle: { interlaced: false },
webp: { quality: 75 }
});
},
configureWebpack: (config) => {
// 开启 gzip 压缩
// 需要 npm i -D compression-webpack-plugin
const plugins = [];
if (IS_PROD) {
plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,//大于10k的进行压缩
minRatio: 0.8,
})
);
plugins.push(
//打包环境去掉console.log等
new TerserPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log'], // 移除console
},
},
}),
);
plugins.push(
new CssMinimizerWebpackPlugin({
minify: CssMinimizerWebpackPlugin.cleanCssMinify,
test: /\.foo\.css$/i,
include: /\/includes/,
exclude: /\/excludes/,
parallel: true,
parallel: 4,
minimizerOptions: {
level: {
1: {
roundingPrecision: "all=3,px=5",
},
},
//删除所有注释
preset: [
"default",
{
discardComments: { removeAll: true },
},
],
},
warningsFilter: (warning, file, source) => {
if (/Dropping unreachable code/i.test(warning)) {
return true;
}
if (/file\.css/i.test(file)) {
return true;
}
if (/source\.css/i.test(source)) {
return true;
}
return false;
},
})
);
plugins.push(
new MiniCssExtractPlugin({
linkType: "text/css",
runtime: false,
experimentalUseImportModule: true,
filename: "[name].css",
chunkFilename: "[id].css",
ignoreOrder: false,
})
)
}
config.plugins = [...config.plugins, ...plugins];
},
})
如果本篇文章对您有帮助请点个赞或者关注一下我