[Vue CLI 3] Uglify 相關的應用和設計

Freeman 發布于2019-08-23 11:41 / 2169人閱讀

摘要：在本文開始之前，先留一個問題如果在新版本我想加一個的配置呢在老版本的腳手架生成的配置中，對于線上環境的文件使用了插件插件配置如下我們看一下新版本的是如何處理的呢在文件中先有一個判斷，測試環境不壓縮通過然后如果不是測試環境第一步也是

在本文開始之前，先留一個問題？

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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