vue 代码压缩优化方式

 更新时间:2022年03月28日 16:42:13   作者:黑色咖啡 Ken  
这篇文章主要介绍了vue 代码压缩优化方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中的数据监听和数据交互案例解析

    Vue中的数据监听和数据交互案例解析

    这篇文章主要介绍了Vue中的数据监听和数据交互案例解析,在文章开头部分先给大家介绍了vue中的数据监听事件$watch,具体代码讲解,大家可以参考下本文
    2017-07-07
  • vue数据对象length属性未定义问题

    vue数据对象length属性未定义问题

    这篇文章主要介绍了vue数据对象length属性未定义问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue编程格式化代码属性自动换行问题

    Vue编程格式化代码属性自动换行问题

    这篇文章主要为大家介绍了Vue编程格式化代码属性及自动换行问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 详解vue3中渲染函数的非兼容变更

    详解vue3中渲染函数的非兼容变更

    这篇文章主要介绍了详解vue3中渲染函数的非兼容变更,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • vue2.0在没有dev-server.js下的本地数据配置方法

    vue2.0在没有dev-server.js下的本地数据配置方法

    这篇文章主要介绍了vue2.0在没有dev-server.js下的本地数据配置方法的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • 使用vue.js在页面内组件监听scroll事件的方法

    使用vue.js在页面内组件监听scroll事件的方法

    今天小编就为大家分享一篇使用vue.js在页面内组件监听scroll事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue中关于computed计算属性的妙用

    Vue中关于computed计算属性的妙用

    这篇文章主要介绍了Vue中关于computed计算属性的妙用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-11-11
  • Vuejs中使用markdown服务器端渲染的示例

    Vuejs中使用markdown服务器端渲染的示例

    这篇文章主要介绍了Vuejs 中使用 markdown的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 全站最详细的Vuex教程

    全站最详细的Vuex教程

    vuex是一个专门为vue.js设计的集中式状态管理架构。这篇文章主要介绍了全站最详细的Vuex教程,需要的朋友可以参考下
    2018-04-04
  • Vue修改页面标签的方法示例

    Vue修改页面标签的方法示例

    vue项目有时候需要根据页面需要动态的去修改页面标题名称,本文就来介绍一下,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06

最新评论