vue 代码压缩优化方式

目录
  • vue代码压缩优化
    • 设置productionSourceMap为false
    • 代码压缩
    • 图片资源压缩
    • 开启gzip压缩
  • vuecli3代码压缩混淆
    • 现将混淆流程记录如下

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

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

(0)

相关推荐

  • 浅谈vue项目打包优化策略

    使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载.那么,怎么优化呢? 1.组件按需加载 这是首先可以优化的点.如果频繁使用了第三方组件/UI库,如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库,如果全部引入,项目体积非常大,这时可以按需引入组件. 示例如下: 1.1 element-ui 首先,安装 babel-plugin-component: npm install babe

  • Vue项目打包、合并及压缩优化网页响应速度

    目录 前言 一.请求内容太大 解决方案: CDN引入 压缩请求资源 一.http请求次数太多 解决方案: 总结 前言 影响网页响应速度的因素有很多,例如:请求内容太大.http请求次数太多.服务器本身处理请求太久.JS脚本执行耗时过长.浏览器回流重绘等.网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站.对于Vue项目而言,最普遍的问题可能在于打包后的文件太大,导致加载时间过长.服务器请求处理太久和js脚本执行耗时过长,这两个跟代码的质量和服务器配置关系太重,需要根据具

  • Vue包大小优化的实现(从1.72M到94K)

    一.背景 最近做了一个网站,uidea,是用来辅助独立开发者做一些 UI 设计的,当时只管开发,等部署完以后,发现访问速度堪忧 毕竟是个小水管服务器,相比提高带宽,还是先看看代码上能不能优化一下,性价比更高 这个是优化前的包大小,这家伙都上 1.72 M 了,小水管加载时间直接往 3s 以上走了,臣妾扛不住啊 二.目标 这必须得优化一下,优化前得大致定一下目标,目标又需要指标来衡量,所以定了两个指标: 页面加载时间不多说,至少得 1s 以内,越快越好 包大小控制在 200k 以内 为什么定这两个

  • Vue项目打包压缩的实现(让页面更快响应)

    影响网页响应速度的因素有很多,例如:http请求次数太多.服务器本身处理请求太久.请求内容太大.JS脚本执行耗时过长.浏览器回流重绘等.网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站.对于Vue项目而言,最普遍的问题可能在于打包后的文件太大,导致加载时间过长. 我的一个小项目,仅有三四个页面,但因为服务器带宽太小了,加载时间过长的问题尤为明显,于是采用路由懒加载和gzip压缩的方式优化了一下,访问速度得到了显著提升. 一.路由懒加载:分割代码块 Vue支持异步组件,

  • vue 代码压缩优化方式

    目录 vue代码压缩优化 设置productionSourceMap为false 代码压缩 图片资源压缩 开启gzip压缩 vuecli3代码压缩混淆 现将混淆流程记录如下 vue代码压缩优化 设置productionSourceMap为false 如果不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建. 设置为false打包时候不会出现.map文件 module.exports = {     productionSourceMap: false } 代码压

  • vue项目打包优化方式(让打包的js文件变小)

    目录 我使用的命令是 vue ui 可视化打包操作 进入可视化面板 需要通过vue.config.js来配置 .js文件中,导致该js文件过大 通常在一个vue项目中会用到很多插件什么,swiper,axios,vuerouter,vuex,…,那么使用了很多插件势必会造成打包的js文件过大,影响加载速度,造成不好的用户体验,那么我就来讲一件我自己总结打包方式,(让js文件变小) 我使用的命令是 vue ui 可视化打包操作 进入可视化面板 默认情况下,vue-cli 3.0生成的项目,隐藏了w

  • vue打包生成的文件的js文件过大的优化方式

    目录 vue打包生成的js文件过大优化 1.组件按需加载 2.去掉生成map文件 3.cdn引入 4.路由懒加载 5.代码压缩 6.最后 项目打包之后js文件太大问题 问题描述 1.使用cdn引入不怎么改变的第三方库 2.使用vue的懒加载 3.服务器和前端配置开启压缩 vue打包生成的js文件过大优化 1.组件按需加载 现在大多的ui库都是以组件的形式进行处理,所以只需导入需要模块的即可 2.去掉生成map文件 打包时会生成map文件,而map文件一般都比较大,可以取消生成map文件 (1)c

  • vue虚拟滚动性能优化方式详解

    目录 引言 虚拟滚动(Virtual Scrolling) 理解虚拟滚动 虚拟 滚动 实现虚拟滚动 核心步骤 效果预览 最后 引言 一个简单的情景模拟(千万别被带入): A: 假设现在有 10 万条数据,你作为前端该怎么优化这种大数据的列表? B: 针对大数据列表一般不会依次性加载,会采用上拉加载.分页加载等方式实现优化. A: 那假如加载到最后一条数据的时候,页面上只是列表部分的数据就至少对应 10 万个 dom 节点,你觉得一个页面渲染至少 10 万个 dom 节点的性能如何? A: 如果这

  • Vue.js实现文件上传压缩优化处理技巧

    目录 vue js实现文件上传压缩优化处理 借助canvas的封装的文件压缩上传 1.新建imgUpload.js 2.全局引入封装的方法 3.页面中使用 使用compressorjs第三方插件实现 1.compressorjs安装 2.方法封装 3.页面使用 4.头像上传处理 vue js实现文件上传压缩优化处理 两种方法 : 第1种是借助canvas的封装的文件压缩上传 第2种(扩展方法)使用compressorjs第三方插件实现 下面来详细介绍两种方法: 借助canvas的封装的文件压缩上

  • uniapp项目优化方式及建议

    目录 1.复杂页面数据区域封装成组件 2.避免使用大图 3.小程序.APP分包处理pages过多 4.图片懒加载 5.禁止滥用本地存储 6.可在外部定义变量 7.分批加载数据优化页面渲染 8.避免视图层和逻辑层频繁进行通讯 9.CSS优化 10.善用节流和防抖 11.优化页面切换动画 12.优化背景色闪白 13.优化启动速度 14.优化包体积 15.禁止滥用外部js插件 1.复杂页面数据区域封装成组件 场景: 例如项目里包含类似论坛页面:点击一个点赞图标,赞数要立即+1,会引发页面级所有的数据从

  • Vue项目打包优化实践指南(推荐!)

    目录 业务背景 项目打包时间分析方法 优化配置的基本思路 前置操作,先通过 webpack-bundle-analyzer 查看资源树 1.vue.config.js 文件中修改:productionSourceMap 为 false 2.针对首屏请求数进行优化—关闭 Prefetch,关闭 preload 一.采用路由懒加载 二.element-ui 组件按需加载 1.在 vue-cli3 项目中,如果没有 babel.config.js,则需要安装 Babel: 2.按照官网文档安装 3.b

  • Vue 项目性能优化方案分享

    目录 前言 一.代码层面的优化 1.1.v-if 和 v-show 区分使用场景 1.2.computed 和 watch  区分使用场景 1.3.v-for遍历必须为item添加key,且避免同时使用v-if 1.4.长列表性能优化 1.5.事件的销毁 1.6.图片资源懒加载 1.7.路由懒加载 1.8.第三方插件的按需引入 1.9.优化无限列表性能 1.10.服务端渲染 SSR or 预渲染 二.Webpack 层面的优化 2.1.Webpack 对图片进行压缩 2.2.减少 ES6 转为

随机推荐