前言
本系列主要整理前端面试中需要掌握的知识点。本节介绍webpack如何优化前端性能。
文章目录
一、webpack的使用背景
- 随着前端的项目逐渐扩大,必然会导致性能问题。尤其大大型复杂的项目中,前端业务可能因为一个小小的数据依赖,导致整个页面的卡顿甚至崩溃。
- 一般项目在完成后,会通过webpack进行打包,利用webpack对前端项目性能优化是一个十分重要的环节。
二、webpack如何优化
通过webpack优化前端的手段有:JS代码压缩、CSS代码压缩、Html文件代码压缩、文件大小压缩、图片压缩、Tree Shaking、代码分离、内联chunk。
1. JS代码压缩
terser是一个JavaScript的解释、绞肉机、压缩机的工具集,可以帮助我们压缩、丑化我们的代码,让bundle更小。在production模式下,webpack 默认就是使用 TerserPlugin 来处理我们的代码的。如果想要自定义配置它,配置方法如下:
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
...
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true // 电脑cpu核数-1
})
]
}
}
2.CSS代码压缩
CSS压缩通常是去除无用的空格等,因为很难去修改选择器、属性的名称、值等。CSS的压缩我们可以使用另外一个插件:css-minimizer-webpack-plugin。
// npm install css-minimizer-webpack-plugin -D
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin(