vue 代码压缩优化方式
作者:黑色咖啡?Ken 时间:2024-04-09 10:44:46
vue代码压缩优化
设置productionSourceMap为false
如果不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
设置为false打包时候不会出现.map文件
module.exports = {
productionSourceMap: false
}
代码压缩
安装uglifyjs-webpack-plugin插件,可以去除项目中console.log和debugger
npm install uglifyjs-webpack-plugin --save
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 生产环境相关配置
if (isProduction) {
// 代码压缩
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
//生产环境去除console等信息
compress: {
warnings: false, // 若打包错误,则注释这行
drop_debugger: true,//是否移除debugger
drop_console: true,
pure_funcs: ['console.log']//移除console
}
},
sourceMap: false,
parallel: true
})
)
}
图片资源压缩
安装 image-webpack-loader 插件,可以将大图片进行压缩从而缩小打包体积
npm install image-webpack-loader --save
chainWebpack: config => {
// ============压缩图片 start============
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({ bypassOnDebug: true })
.end()
// ============压缩图片 end============
}
开启gzip压缩
开启gzip压缩,可以优化http请求,提高加载速度
npm install compression-webpack-plugin --save-dev
const CompressionPlugin = require("compression-webpack-plugin");
// 开启gzip压缩
config.plugins.push(new CompressionPlugin({
algorithm: 'gzip',
test: new RegExp("\\.(" + ["js", "css"].join("|") + ")$"), // 匹配文件扩展名
// threshold: 10240, // 对超过10k的数据进行压缩
threshold: 5120, // 对超过5k的数据进行压缩
minRatio: 0.8,
cache: true, // 是否需要缓存
deleteOriginalAssets:false // true删除源文件(不建议);false不删除源文件
}))
vuecli3代码压缩混淆
最近被某大公司大佬虐了,要求混淆用vuecli3写的代码(啥敏感信息都没有,混淆个什么混淆...)
现将混淆流程记录如下
1、安装 “uglifyjs-webpack-plugin”
cnpm i --save uglifyjs-webpack-plugin
没有安装cnpm的同学可以用npm
2、在项目根目录下创建一个名为 vue.config.js的文件
3、在vue.config.js中引入uglifyjs-webpack-plugin
const UglifyPlugin = require('uglifyjs-webpack-plugin')
4、在vue.config.js中配置uglifyjs-webpack-plugin
module.exports = {
configureWebpack: (config) => {
if (process.env.NODE_ENV == 'production') {
// 为生产环境修改配置
config.mode = 'production'
// 将每个依赖包打包成单独的js文件
let optimization = {
minimizer: [new UglifyPlugin({
uglifyOptions: {
warnings: false,
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']
}
}
})]
}
Object.assign(config, {
optimization
})
} else {
// 为开发环境修改配置
config.mode = 'development'
}
}
};
这就可以了,接下来大家可以打包试试了
cnpm run build
如果报错的话,估计是uglifyjs-webpack-plugin版本又更新了,可能需要修改配置中的 “minimizer”节点,官方文档地址:https://www.npmjs.com/package/uglifyjs-webpack-plugin
来源:https://blog.csdn.net/a4561614/article/details/121910106
标签:vue,代码,压缩,优化
0
投稿
猜你喜欢
django 捕获异常和日志系统过程详解
2022-04-26 22:12:43
基于ORA-19815闪回空间爆满问题的处理方法
2024-01-21 03:35:04
在Internet Explorer中正确使用MSXML
2009-02-22 18:41:00
python图片灰度化处理的几种方法
2023-03-05 01:14:57
细节设计之美:扩大可操作区域
2009-08-01 11:32:00
python调用dll出现精度问题解决
2022-10-30 06:59:48
Git基本概述
2023-12-07 14:13:28
MySQL里的反斜杠(\\\\)的使用
2024-01-26 03:20:57
Django 多表关联 存储 使用方法详解 ManyToManyField save
2023-07-10 08:06:55
GoFrame框架gcache的缓存控制淘汰策略实践示例
2023-07-22 06:41:19
HTML 标签是否匹配检测代码
2010-03-17 20:50:00
SQL2008的sa账户被禁用其他账户无法连接的快速解决方法
2024-01-17 05:12:53
Python+OpenCV图像处理——图像二值化的实现
2021-05-15 04:39:03
Flaks基础之在URL中添加变量的实现详解
2023-07-22 00:42:20
Go语言流程控制语句
2023-10-11 00:53:54
Python使用 OpenCV 进行图像投影变换
2021-09-10 03:08:19
使用python实现knn算法
2022-01-26 09:33:45
Python3.6中Twisted模块安装的问题与解决
2022-05-29 15:45:02
通过字符串导入 Python 模块的方法详解
2023-10-15 03:00:56
ORACLE 数据库RMAN备份恢复
2009-04-24 12:23:00