在本文开始之前,先留一个问题?

如果在新版本我想加一个 drop_console 的配置呢?

老版本的脚手架生成的配置中,对于线上环境的文件:webpack.prod.conf.js

使用了插件:uglifyjs-webpack-plugin


const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

插件配置如下:


plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
})
]

我们看一下新版本的是如何处理的呢?

在文件:@vue/cli-service/lib/config/prod.js 中:

先有一个判断,测试环境不压缩:通过 optimization.minimize


if (process.env.VUE_CLI_TEST) {
webpackConfig.optimization.minimize(false)
}

然后如果不是测试环境:

第一步也是加载插件 uglifyjs-webpack-plugin


const UglifyPlugin = require('uglifyjs-webpack-plugin')

第二步进行插件配置:通过 optimization.minimizer


webpackConfig.optimization.minimizer([
new UglifyPlugin(uglifyOptions(options))
])

这里的内置配置有哪些呢?我们看看 uglifyOptions.js 文件:

相比之前的 uglifyOptions 要多很多:


module.exports = options => ({
uglifyOptions: {
compress: {
// turn off flags with small gains to speed up minification
arrows: false,
collapse_vars: false, // 0.3kb
comparisons: false,
computed_props: false,
hoist_funs: false,
hoist_props: false,
hoist_vars: false,
inline: false,
loops: false,
negate_iife: false,
properties: false,
reduce_funcs: false,
reduce_vars: false,
switches: false,
toplevel: false,
typeofs: false, // a few flags with noticable gains/speed ratio
// numbers based on out of the box vendor bundle
booleans: true, // 0.7kb
if_return: true, // 0.4kb
sequences: true, // 0.7kb
unused: true, // 2.3kb // required features to drop conditional branches
conditionals: true,
dead_code: true,
evaluate: true
},
mangle: {
safari10: true
}
},
sourceMap: options.productionSourceMap,
cache: true,
parallel: true
})

来源:https://segmentfault.com/a/1190000016254326

[Vue CLI 3] Uglify 相关的应用和设计的更多相关文章

  1. Vue CLI 是如何实现的 -- 终端命令行工具篇

    Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析项目初始化部分,也就是终端命令行工具的实现. 0. 用法 ...

  2. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  3. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  4. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  5. vue cli 3

    介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...

  6. [WIP]Vue CLI

    更新: 2019/05/30 文档: https://cli.vuejs.org/zh/  安装 npm install -g @vue/cli 确认是否成功安装 vue --version 基础   ...

  7. vue cli 平稳升级webapck4

    webpack4 released 已经有一段时间了,插件系统趋于平稳,适逢对webpack3的打包速度很不满意,因此决定将当前在做的项目进行升级,正好也实践一下webpack4. 新特性 0配置 应 ...

  8. 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm

    前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...

  9. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

随机推荐

  1. springcloud 使用RabbitMq

    新建一个项目,三个module 分别为eureka-server,config-server,config-client, eureka-server 的pom.xml, <?xml versi ...

  2. PostgreSQL DISTINCT ON

    https://stackoverflow.com/questions/3800551/select-first-row-in-each-group-by-group select DISTINCT ...

  3. 性能压测中的SLA,你知道吗?

    本文是<Performance Test Together>(简称PTT)系列专题分享的第6期,该专题将从性能压测的设计.实现.执行.监控.问题定位和分析.应用场景等多个纬度对性能压测的全 ...

  4. [转]iMPACT Spartan-6 FPGA - "WARNING:iMPACT:2217-Error shows in the status register, CRC Error bit is Not 0"

    AR# 45304 iMPACT Spartan-6 FPGA - "WARNING:iMPACT:2217-Error shows in the status register, CRC ...

  5. NMS 和 Soft-NMS

    转自https://zhuanlan.zhihu.com/p/42018282 一 NMS NMS算法的大致思想:对于有重叠的候选框:若大于规定阈值(某一提前设定的置信度)则删除,低于阈值的保留.对于 ...

  6. VS中添加配置X86平台

    最近IIS发布程序时,总是容易碰到下面的错误.这个错误网上绝大部分都是提出在VS把解决方案设置为在X86平台生成,然后再发布.但是查看应用程序后发现没有X86平台选项,下面是添加X86目标平台的方法.

  7. JavaScript怎么解析后台传入的json字符串

    var data = "{'name': '张三', 'age': 23, 'gender': true}"; //json字符串 var jso = JSON.parse(dat ...

  8. 修改CentOS6.5主机名引起MySQL5.6.35服务问题

    本来是心血来潮修改CentOS6.5的主机名 /****** 修改CentOS6.5默认主机名 ******/ .备份系统网络配置文件 [root@localhost ~]# cp /etc/sysc ...

  9. numpy库数组属性查看:类型、尺寸、形状、维度

    import numpy as np   q = np.array([1,2,3,4],dtype=np.complex128)    print("数据类型",type(q))  ...

  10. IntersectionObserver API 使用教程(转载)

    作者: 阮一峰 日期: 2016年11月 3日 网页开发时,常常需要了解某个元素是否进入了"视口"(viewport),即用户能不能看到它. 上图的绿色方块不断滚动,顶部会提示它的 ...