vue 应用生产环境的 webpack 打包配置优化

时间:2021-08-27 09:59:24

转: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
版权声明:本文为博主原创文章,转载请附上博文链接!