小编给大家分享一下vue代码压缩优化方式有哪些，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
如果不需要生产环境的 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压缩，可以优化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写的代码（啥敏感信息都没有，混淆个什么混淆...）
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”节点
看完了这篇文章，相信你对“vue代码压缩优化方式有哪些”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
