資訊專欄INFORMATION COLUMN
摘要：在本文開始之前，先留一個(gè)問題如果在新版本我想加一個(gè)的配置呢在老版本的腳手架生成的配置中，對(duì)于線上環(huán)境的文件使用了插件插件配置如下我們看一下新版本的是如何處理的呢在文件中先有一個(gè)判斷，測(cè)試環(huán)境不壓縮通過然后如果不是測(cè)試環(huán)境第一步也是
在本文開始之前，先留一個(gè)問題？
如果在新版本我想加一個(gè) drop_console 的配置呢？
在老版本的腳手架生成的配置中，對(duì)于線上環(huán)境的文件：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 中：
先有一個(gè)判斷，測(cè)試環(huán)境不壓縮：通過 optimization.minimize
if (process.env.VUE_CLI_TEST) {
webpackConfig.optimization.minimize(false)
}
然后如果不是測(cè)試環(huán)境：
第一步也是加載插件 uglifyjs-webpack-plugin
const UglifyPlugin = require("uglifyjs-webpack-plugin")
第二步進(jìn)行插件配置：通過 optimization.minimizer
webpackConfig.optimization.minimizer([ new UglifyPlugin(uglifyOptions(options)) ])
這里的內(nèi)置配置有哪些呢？我們看看 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
})
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/97317.html
摘要：慢慢地，關(guān)于的原創(chuàng)學(xué)習(xí)文章已經(jīng)寫了多篇了會(huì)一直放出來，目前篇，因此做一個(gè)合集，獻(xiàn)給那些對(duì)新版本腳手架使用和背后設(shè)計(jì)感興趣的同學(xué)，都是一步一步去看源碼，也給官方提了幾次，合進(jìn)去了幾個(gè)原創(chuàng)不易，歡迎大家互相轉(zhuǎn)發(fā)，期望大家一起快速過度到版本目錄 慢慢地，關(guān)于 Vue CLI 3 的原創(chuàng)學(xué)習(xí)文章已經(jīng)寫了 20 多篇了（會(huì)一直放出來，目前 23 篇）， 因此做一個(gè)合集，獻(xiàn)給那些對(duì)新版本腳手架使用...
摘要：使用打包的基本上都是獨(dú)立庫文件，這類文件有一個(gè)特性就是變化不大。修改往添加一個(gè)配置只針對(duì)的模塊化有效配置文件詳情請(qǐng)點(diǎn)擊 基于vue-cli優(yōu)化的webpack配置 大概分為以下幾點(diǎn) 通過 externals 配置來提取常用庫，引用外鏈 配置CommonsChunkPlugin提取公用代碼 （vue-cli已做） 善用alias（vue-cli配置了一部分） 啟用DllPlugin和D...
摘要：以為例，編寫來幫助我們完成重復(fù)的工作編譯壓縮我只要執(zhí)行一下就可以檢測(cè)到文件的變化，然后為你執(zhí)行一系列的自動(dòng)化操作，同樣的操作也發(fā)生在這些的預(yù)處理器上。的使用是針對(duì)第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發(fā)展 很久以前，互聯(lián)網(wǎng)行業(yè)有個(gè)職位叫做 軟件開發(fā)工程師 在那個(gè)時(shí)代，大家可能...
容易混淆概念解析 讀這篇文章理清下面概念 webpack 中那些最易混淆的 5 個(gè)知識(shí)點(diǎn) 1.module，chunk 和 bundle 的區(qū)別是什么？2.filename 和 chunkFilename 的區(qū)別 版本區(qū)別 webpack 2x entry output loaders file-loader：把文件輸出到一個(gè)文件夾中，在代碼中通過相對(duì) URL 去引用輸出的文件 url-lo...
摘要：世界的構(gòu)建工具為何要用構(gòu)建工具一句話自動(dòng)化。由于擁有數(shù)量龐大的插件可供選擇，因此，你可以利用自動(dòng)完成任何事，并且花費(fèi)最少的代價(jià)。要想使用，首先必須將安裝到全局環(huán)境中，使用的進(jìn)行安裝。 你沒有理由不學(xué)、不用！ jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt， grunt是一套前端自動(dòng)化工具，一個(gè)基于nodeJs的命令行工具，一般用于：...
閱讀 3513·2023-04-26 02:41
閱讀 2646·2023-04-26 00:14
閱讀 3109·2021-08-11 10:22
閱讀 1449·2019-12-27 11:38
閱讀 3668·2019-08-29 18:34
閱讀 2466·2019-08-29 12:13
閱讀 3036·2019-08-26 18:26
閱讀 2087·2019-08-26 16:49
