首先说明一下，我优化的项目是基于vue3 + ts的一个项目，使用的是webpack5的版本，不一定非要是webpack5经测试4也可以正常使用
若想查看自己当前项目的webpack版本，可以找node_modules目录下面的webpack/package.json文件，查看文件中的version，如下图
下面开始进入正题
一、关闭productionSourceMap
productionSourceMap的作用在于定位问题，打包时会生成.map文件，在生产环境就可以在浏览器查看到输出的信息具体是在哪一行，但相应的包的体积也会变大，将其设置为false则不生成.map文件
module.exports = defineConfig({
productionSourceMap: false,
})二、开启gzip
gzip并不能很好的减小dist包的体积，个人觉的主要作用是在你build后，会生成两份代码，一份压缩的，一份未压缩的，在请求时服务器会优先选择压缩的版本进行返回
// 判断是否是生产环境
const isProduction = process.env.NODE_ENV !== "development";
module.exports = {
configureWebpack: config => {
// 若是生产环境，则执行以下代码
if (isProduction) {
//gzip压缩
const productionGzipExtensions = ["html", "js", "css"];
config.plugins.push(
new CompressionWebpackPlugin({
filename: "[path][base].gz", // 有的版本是[path].gz[query] 根据情况而定
algorithm: "gzip",
test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false, // 删除原文件
})
);
}
}
}
上面配置完后，还需配置下nginx
在ngxin.conf文件，在http模块填入以下内容
# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式，后面的图片压缩不需要的可以自行删除
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 设置压缩所需要的缓冲区大小
gzip_buffers 4 16k;然后就可以启动nginx查看效果了，因为我这是测试项目，没有多少东西，所以结果时间相差不大，大家可以自行测试
未压缩的
压缩后的
三、开启CDN
CDN主要是将一些可以在CDN服务器上引用到的插件不进行打包，直接通过CDN链接，从而减小包的体积
1、首先配置好各个链接地址
若不知道地址是什么的可通过BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务进行查询，下面是关于cdn链接地址后缀的介绍
Vue的各种版本介绍：
1. cjs（两个版本都是完整版，包含编译器）
vue.cjs.js
vue.cjs.prod.js（开发版，代码进行了压缩）
2. global（这四个版本都可以在浏览器中直接通过scripts标签导入，导入之后会增加一个全局的Vue对象）
vue.global.js（完整版，包含编译器和运行时）
vue.global.prod.js（完整版，包含编译器和运行时，这是开发版本，代码进行了压缩） vue.runtime.global.js
vue.runtime.global.prod.js
3. browser（四个版本都包含esm，浏览器的原生模块化方式，可以直接通过<script type="module" />的方式来导入模块）
vue.esm-browser.js
vue.esm-browser.prod.js
vue.runtime.esm-browser.js
vue.runtime.esm-browser.prod.js
4. bundler（这两个版本没有打包所有的代码，只会打包使用的代码，需要配合打包工具来使用，会让Vue体积更小）
vue.esm-bundler.js
bue.runtime.esm-bundler.js
2、找到需要的cdn链接后，进行如下配置
// 本地环境是否需要使用cdn
const devNeedCdn = false
const cdn = {
// cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
'element-plus': 'ElementPlus',
'axios': 'axios',
'echarts': 'echarts'
},
// cdn的css链接
css: [
'https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.12/theme-chalk/index.min.css'
],
// cdn的js链接
js: [
'https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.min.js',
'https://cdn.bootcdn.net/ajax/libs/vuex/4.0.2/vuex.global.min.js',
'https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.3/vue-router.global.min.js',
'https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.12/index.full.min.js',
'https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.12/locale/zh-cn.min.js',
'https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js',
'https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js'
]
}
module.exports = {
chainWebpack: config => {
// ============注入cdn start============
config.plugin('html').tap(args => {
// 生产环境或本地需要cdn时，才注入cdn
if (isProduction || devNeedCdn) args[0].cdn = cdn
return args
})
},
configureWebpack: config => {
// 用cdn方式引入，则构建时要忽略相关资源
if (isProduction || devNeedCdn) config.externals = cdn.externals
}
}然后配置你的静态资源文件，目录：public/index.html中，配置如下
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.css) { %>
<link
href="<%= htmlWebpackPlugin.options.cdn.css[i] %>"
rel="stylesheet"
/>
<% } %>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn &&
htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
四、代码压缩
使用uglifyjs-webpack-plugin插件进行对js的代码压缩优化
安装插件 npm i -D uglifyjs-webpack-plugin
然后配置如下内容
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = defineConfig({
configureWebpack: config => {
// 代码压缩
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
//生产环境自动删除console
compress: {
drop_debugger: true,
drop_console: true,
pure_funcs: ['console.log']
}
},
sourceMap: false,
parallel: true
})
)
}
})五、图片压缩
使用image-webpack-loader插件将图片进行压缩
此插件会将你的图片压缩到一定大小，而一些小图片会被直接压缩成base64格式
安装插件 npm install image-webpack-loader
--save-dev
我看到有些人也会使用url-loader来压缩图片，url-loader只适用于比较小的图片资源，如果图片很大会导致构建出的.js文件加载缓慢。
一般会配置小图片使用url-loader完成，而大图片则使用image-webpack-loader进行压缩，不过我测试了一下，发现直接使用image-webpack-loader也可以直接将小图片压缩为base64，所以我这里就直接配置了image-webpack-loader，没有去进行拆分
配置如下信息文章来源：https://www.toymoban.com/news/detail-790073.html
module.exports = defineConfig({
chainWebpack: config => {
// ============压缩图片 start============
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
.end()
}
})目前了解的优化手段大概是这些，如果还有其他方式，还希望老板们也可以分享一下，大家相互学习！文章来源地址https://www.toymoban.com/news/detail-790073.html
到了这里，关于vue 性能优化方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
