webpack之生產環境production

生產環境插件

1，compression-webpack-plugin

⑴目的：因爲nginx開啓gzip須要消耗服務器的cpu性能，從而也會影響服務響應時間，因此前端先把打包後的文件再壓縮一次放到nginx上面，配置nginx規則，遇到壓縮過的就不在壓縮，直接壓縮過的文件返回給瀏覽器解析。
(2)流程，
Ⅰ，前端經過compression-webpack-plugin插件將文件打包後的文件壓縮。經過npm i compression-webpack-plugin -D命令安裝。
例如vue-cli3.x的配置文件
`
if (process.env.NODE_ENV ==='production'){
config.plugin('compressionPlugin')
.use(new compressionWebpackPlugin({

// filename: '[path].gz[query]',
 algorithm: 'gzip',
 // test: /.(js|css|txt|html|ico|svg)(?.*)?$/i,
 test:/.(js|css|html|ttf|otf)(?.*)?$/i,
 threshold: 10240,
 minRatio: 0.8,
 deleteOriginalAssets: false

}));
}
`
Ⅱ，打包後全部的dist文件會出現.gz的後綴文件（*注意不要刪除源備份，deleteOriginalAssets: false表示不刪除備份，不然瀏覽器會解析不出壓縮文件而報錯）.例如

Ⅲ，配置Nginx，開啓gzip壓縮，可是遇到gz後綴文件不在壓縮直接丟給瀏覽器本身去解析，配置以下(該配置遇到gz後綴不會在壓縮了)
`
#Gzip Compression
gzip on;
gzip_static on;//開啓靜態文件壓縮
gzip_buffers 4 16k;//緩存區大小
gzip_comp_level 9;//壓縮程度，
gzip_http_version 1.1;//http版本
gzip_min_length 10k;//文件大小閾值，超過就開啓gzip壓縮
gzip_proxied any;
gzip_vary on;
gzip_types gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
gzip_disable "MSIE [1-6].";
`
Ⅳ，打開瀏覽器的network，看到下面的Content-Encoding爲gzip的表示經過了Nginx壓縮。Content-Encoding不是gzip的的部分文件就是前端打包後的gz後綴文件，瀏覽器呈現出來的是把gz後綴文件解壓後的。

2，babel-plugin-transform-remove-console

⑴目的:打包後的項目只會保留error和warn的console。