[Vue CLI 3] Uglify 相关的应用和设计

Freeman 发布于2019-08-23 11:41 / 2167人阅读

摘要：在本文开始之前，先留一个问题如果在新版本我想加一个的配置呢在老版本的脚手架生成的配置中，对于线上环境的文件使用了插件插件配置如下我们看一下新版本的是如何处理的呢在文件中先有一个判断，测试环境不压缩通过然后如果不是测试环境第一步也是

在本文开始之前，先留一个问题？

如果在新版本我想加一个 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://www.ucloud.cn/yun/97317.html

[全网最全的 Vue CLI 3 原创合集] 你要的这里都有

摘要：慢慢地，关于的原创学习文章已经写了多篇了会一直放出来，目前篇，因此做一个合集，献给那些对新版本脚手架使用和背后设计感兴趣的同学，都是一步一步去看源码，也给官方提了几次，合进去了几个原创不易，欢迎大家互相转发，期望大家一起快速过度到版本目录慢慢地，关于 Vue CLI 3 的原创学习文章已经写了 20 多篇了（会一直放出来，目前 23 篇），因此做一个合集，献给那些对新版本脚手架使用...

phpmatt 2019-08-23 12:00 评论0 收藏0
基于vue-cli的webpack配置优化

摘要：使用打包的基本上都是独立库文件，这类文件有一个特性就是变化不大。修改往添加一个配置只针对的模块化有效配置文件详情请点击基于vue-cli优化的webpack配置大概分为以下几点通过 externals 配置来提取常用库，引用外链配置CommonsChunkPlugin提取公用代码（vue-cli已做）善用alias（vue-cli配置了一部分）启用DllPlugin和D...

caohaoyu 2019-08-21 17:15 评论0 收藏0
webpack4.x升级摘要

摘要：以为例，编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化，然后为你执行一系列的自动化操作，同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的发展很久以前，互联网行业有个职位叫做软件开发工程师在那个时代，大家可能...

levinit 2019-08-23 18:11 评论0 收藏0
webpack使用记录

容易混淆概念解析读这篇文章理清下面概念 webpack 中那些最易混淆的 5 个知识点 1.module，chunk 和 bundle 的区别是什么？2.filename 和 chunkFilename 的区别版本区别 webpack 2x entry output loaders file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 url-lo...

Sike 2019-08-22 18:48 评论0 收藏0
用grunt搭建自动化的web前端开发环境-完整教程

摘要：世界的构建工具为何要用构建工具一句话自动化。由于拥有数量庞大的插件可供选择，因此，你可以利用自动完成任何事，并且花费最少的代价。要想使用，首先必须将安装到全局环境中，使用的进行安装。你没有理由不学、不用！ jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt， grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：...

wanghui 2019-08-20 17:02 评论0 收藏0