轉：https://blog.csdn.net/robin_star_/article/details/83856363
前言：很好的打包優化的帖子，還沒來的急去實測驗證
1. 去掉 console 打印及 debug 信息，加快運行速度
修改 /build/webpack.prod.conf.js 文件配置如下：
const webpackConfig = merge(baseWebpackConfig, {
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
// 以下兩行配置，關閉 debug 和 console
drop_debugger: true,
drop_console: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
})
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2. 禁止生成 map 文件，保護源碼，同時減小打包體積
修改 /config/index.js 文件配置如下：
module.exports = {
build: {
/**
* Source Maps
*/
productionSourceMap: false, // 把該項的配置修改為 false，關閉 source map
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map'
}
}
1
2
3
4
5
6
7
8
9
10
3. 開啟 GZIP 壓縮，進一步壓縮 js 和 css 文件的體積
修改 /config/index.js 文件配置如下：
module.exports = {
build: {
// 默認情況下 Gzip 關閉，因為許多流行的靜態主機，如 Surge 或 Netlify 已經為您 gzip 所有靜態資源。
// 將其配置為 true 之前，確保執行以下代碼安裝 compression-webpack-plugin 插件（默認是安裝的最新版本）：
// npm install --save-dev compression-webpack-plugin
productionGzip: true, // 開啟 gzip 功能
productionGzipExtensions: ['js', 'css']
}
}
1
2
3
4
5
6
7
8
9
修改 /build/webpack.prod.conf.js 文件配置如下：
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
// asset: '[path].gz[query]', // 原配置報錯：ValidationError: Compression Plugin Invalid Options
filename: '[path].gz[query]', // 將asset 修改為 filename 后又報錯：TypeError: Cannot read property 'emit' of undefined，執行以下操作：npm install --save-dev compression-webpack-plugin@1.1.12
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
修改服務器的配置，以 Nginx 為例，找到 conf 目錄下的 nginx.conf，開啟 gzip，並設置 gzip 的類型，如下：
gzip on;
gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
1
2
開啟 Gzip 的過程比較波折，請仔細查看注釋信息，如有疑問請查看插件的官方文檔：
compression-webpack-plugin 插件官方文檔
---------------------
作者：Robin_zero
來源：CSDN
原文：https://blog.csdn.net/robin_star_/article/details/83856363
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！