zoukankan      html  css  js  c++  java
  • [Vue CLI 3] Uglify 相关的应用和设计

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

    如果在新版本我想加一个 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

  • 相关阅读:
    学习进度——第十周
    梦断代码读后感03
    DFS入门——数的拆分
    DFS入门——素数环问题
    排列LCS问题
    洛谷P1436 棋盘分割 题解 二维区间DP
    洛谷P1241 括号序列 题解 栈
    《算法艺术与信息学竞赛》第1章 算法与数据结构 学习笔记
    洛谷P1563 玩具谜题(NOIP提高组2016 D1T1)题解 模拟
    洛谷P5022 旅行(NOIP提高组2018 D2T1)题解 贪心/去环
  • 原文地址:https://www.cnblogs.com/lovellll/p/10138818.html
Copyright © 2011-2022 走看看