代码压缩的作用 / 好处
- JS和CSS经过压缩之后体积变小,也就是文件占用内存会变小
- 在访问网站的时候要加载JS和CSS,体积越小,加载越快。
- 网站打开的速度也就越快,有利于用户体验。
- 混淆:经过编码将变量和函数原命名改为毫无意义的命名,以防止他人窥视和窃取 Javascript 源代码。
文件压缩
1.js文件的压缩
内置了uglifyjs-webpack-plugin
webpack4,mode设置为production默认开启代码压缩
2.css文件的压缩
使用optimize-css-assets-webpack-plugin
同时使用cssnano
配合MiniCssExtractPlugin插件把css单独分离成一个文件
配置:
plugins:[
new OptimzeCSSAssetsPlugin({
assetNameRegExp:/\.css$/g,
cssProcessor:require('cssnano')
})
]
3.html文件的压缩
依赖html-webpack-plugin插件
配置:(设置参数)
plugins: [
new HtmlWebpackPlugin({ // 打包输出HTML
title: 'Hello World app',
minify: { // 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true// 压缩内联css
},
filename: 'index.html',
}),
]