一般项目在完成后,会通过webpack进行打包,利用webpack对前端项目性能优化是一个十分重要的环节 通过webpack优化前端的手段有: terser是一个JavaScript的解释、绞肉机、压缩机的工具集,可以帮助我们压缩、丑化我们的代码,让bundle更小 在production模式下,webpack 默认就是使用 TerserPlugin 来处理我们的代码的。如果想要自定义配置它,配置方法如下: 属性介绍如下: CSS压缩通常是去除无用的空格等,因为很难去修改选择器、属性的名称、值等 CSS的压缩我们可以使用另外一个插件:css-minimizer-webpack-plugin 配置方法如下: 使用HtmlWebpackPlugin插件来生成HTML的模板时候,通过配置属性minify进行html优化 设置了minify,实际会使用另一个插件html-minifier-terser 对文件的大小进行压缩,减少http传输过程中宽带的损耗 一般来说在打包之后,一些图片文件的大小是远远要比 js 或者 css 文件要来的大,所以图片压缩较为重要 配置方法如下: Tree Shaking 是一个术语,在计算机中表示消除死代码,依赖于ES Module的静态语法分析(不执行任何的代码,可以明确知道模块的依赖关系) 在webpack实现Trss shaking有两种不同的方案: 两种不同的配置方案, 有不同的效果 配置方法也很简单,只需要将usedExports设为true 使用之后,没被用上的代码在webpack打包中会加入unused harmony export mul注释,用来告知 Terser 在优化时,可以删除掉这段代码 sideEffects用于告知webpack compiler哪些模块时有副作用,配置方法是在package.json中设置sideEffects属性 如果sideEffects设置为false,就是告知webpack可以安全的删除未用到的exports 如果有些文件需要保留,可以设置为数组的形式 上述都是关于javascript的tree shaking,css同样也能够实现tree shaking css进行tree shaking优化可以安装PurgeCss插件 将代码分离到不同的bundle中,之后我们可以按需加载,或者并行加载这些文件 默认情况下,所有的JavaScript代码(业务代码、第三方依赖、暂时没有用到的模块)在首页全部都加载,就会影响首页的加载速度 代码分离可以分出出更小的bundle,以及控制资源加载优先级,提供代码的加载性能 这里通过splitChunksPlugin来实现,该插件webpack已经默认安装和集成,只需要配置即可 默认配置中,chunks仅仅针对于异步(async)请求,我们可以设置为initial或者all splitChunks主要属性有如下: 可以通过InlineChunkHtmlPlugin插件将一些chunk的模块内联到html,如runtime的代码(对模块进行解析、加载、模块信息相关的代码),代码量并不大,但是必须加载的如何优化
JS代码压缩
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
...
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true // 电脑cpu核数-1
})
]
}
}
CSS代码压缩
npm install css-minimizer-webpack-plugin -D
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
module.exports = {
// ...
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin({
parallel: true
})
]
}
}
Html文件代码压缩
module.exports = {
...
plugin:[
new HtmlwebpackPlugin({
...
minify:{
minifyCSS:false, // 是否压缩css
collapseWhitespace:false, // 是否折叠空格
removeComments:true // 是否移除注释
}
})
]
}
文件大小压缩
npm install compression-webpack-plugin -D
new ComepressionPlugin({
test:/\.(css|js)$/, // 哪些文件需要压缩
threshold:500, // 设置文件多大开始压缩
minRatio:0.7, // 至少压缩的比例
algorithm:"gzip", // 采用的压缩算法
})
图片压缩
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
}
},
{
loader: 'image-webpack-loader',
options: {
// 压缩 jpeg 的配置
mozjpeg: {
progressive: true,
quality: 65
},
// 使用 imagemin**-optipng 压缩 png,enable: false 为关闭
optipng: {
enabled: false,
},
// 使用 imagemin-pngquant 压缩 png
pngquant: {
quality: '65-90',
speed: 4
},
// 压缩 gif 的配置
gifsicle: {
interlaced: false,
},
// 开启 webp,会把 jpg 和 png 图片压缩为 webp 格式
webp: {
quality: 75
}
}
}
]
},
]
}
Tree Shaking
usedExports
module.exports = {
...
optimization:{
usedExports
}
}
sideEffects
"sideEffecis":[ "./src/util/format.js", "*.css" // 所有的css文件]
css tree shaking
npm install purgecss-plugin-webpack -D
const PurgeCssPlugin = require('purgecss-webpack-plugin')module.exports = { ... plugins:[ new PurgeCssPlugin({ path:glob.sync(`${path.resolve('./src')}/**/*`), {nodir:true}// src里面的所有文件 satelist:function(){ return { standard:["html"] } } }) ]}
代码分离
module.exports = { ... optimization:{ splitChunks:{ chunks:"all" } }}
内联chunk
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { ... plugin:[ new InlineChunkHtmlPlugin(HtmlWebpackPlugin,[/runtime.+\.js/]}