前端必會的Webpack優(yōu)化技巧

第前端必會的Webpack優(yōu)化技巧目錄webpack優(yōu)化很有必要構(gòu)建時(shí)間優(yōu)化thread-loadercache-loader開啟熱更新excludeinclude構(gòu)建區(qū)分環(huán)境提升webpack版本打包體積優(yōu)化CSS代碼壓縮JS代碼壓縮tree-shakingsource-map類型打包體積分析用戶體驗(yàn)優(yōu)化模塊懶加載Gzip小圖片轉(zhuǎn)base64合理配置hash

webpack優(yōu)化很有必要

上一篇文章給大家講解了簡單搭建一個(gè)Vuecli，但是只是基本搭建，而沒有進(jìn)行進(jìn)一步的優(yōu)化。

而使用webpack打包躲不開的就是webpack優(yōu)化這個(gè)話題，無論是面試還是實(shí)際開發(fā)，優(yōu)化都是非常重要的事情，畢竟提升用戶體驗(yàn)是我們前端工程師的職責(zé)

構(gòu)建時(shí)間優(yōu)化

首先就是構(gòu)建時(shí)間的優(yōu)化了

thread-loader

多進(jìn)程打包，可以大大提高構(gòu)建的速度，使用方法是將thread-loader放在比較費(fèi)時(shí)間的loader之前，比如babel-loader

由于啟動(dòng)項(xiàng)目和打包項(xiàng)目都需要加速，所以配置在webpack.base.js

npmithread-loader-D

//webpack.base.js

test:/\.js$/,

use:[

'thread-loader',

'babel-loader'

cache-loader

緩存資源，提高二次構(gòu)建的速度，使用方法是將cache-loader放在比較費(fèi)時(shí)間的loader之前，比如babel-loader

由于啟動(dòng)項(xiàng)目和打包項(xiàng)目都需要加速，所以配置在webpack.base.js

npmicache-loader-D

//webpack.base.js

test:/\.js$/,

use:[

'cache-loader',

'thread-loader',

'babel-loader'

開啟熱更新

比如你修改了項(xiàng)目中某一個(gè)文件，會導(dǎo)致整個(gè)項(xiàng)目刷新，這非常耗時(shí)間。如果只刷新修改的這個(gè)模塊，其他保持原狀，那將大大提高修改代碼的重新構(gòu)建時(shí)間

只用于開發(fā)中，所以配置在webpack.dev.js

//webpack.dev.js

//引入webpack

constwebpack=require('webpack');

//使用webpack提供的熱更新插件

plugins:[

newwebpack.HotModuleReplacementPlugin()

//最后需要在我們的devserver中配置

devServer:{

+hot:true

excludeinclude

exclude：不需要處理的文件

include：需要處理的文件

合理設(shè)置這兩個(gè)屬性，可以大大提高構(gòu)建速度

在webpack.base.js中配置

//webpack.base.js

test:/\.js$/,

//使用include來指定編譯文件夾

include:path.resolve(__dirname,'../src'),

//使用exclude排除指定文件夾

exclude:/node_modules/,

use:[

'babel-loader'

構(gòu)建區(qū)分環(huán)境

區(qū)分環(huán)境去構(gòu)建是非常重要的，我們要明確知道，開發(fā)環(huán)境時(shí)我們需要哪些配置，不需要哪些配置；而最終打包生產(chǎn)環(huán)境時(shí)又需要哪些配置，不需要哪些配置：

開發(fā)環(huán)境：去除代碼壓縮、gzip、體積分析等優(yōu)化的配置，大大提高構(gòu)建速度生產(chǎn)環(huán)境：需要代碼壓縮、gzip、體積分析等優(yōu)化的配置，大大降低最終項(xiàng)目打包體積

上篇文章已經(jīng)帶大家進(jìn)行了環(huán)境區(qū)分

提升webpack版本

webpack版本越新，打包的效果肯定更好

打包體積優(yōu)化

主要是打包后項(xiàng)目整體體積的優(yōu)化，有利于項(xiàng)目上線后的頁面加載速度提升

本項(xiàng)目已經(jīng)是webpack最新版本

CSS代碼壓縮

CSS代碼壓縮使用css-minimizer-webpack-plugin，效果包括壓縮、去重

代碼的壓縮比較耗時(shí)間，所以只用在打包項(xiàng)目時(shí)，所以只需要在d.js中配置

npmicss-minimizer-webpack-plugin-D

//d.js

constCssMinimizerPlugin=require('css-minimizer-webpack-plugin')

optimization:{

minimizer:[

newCssMinimizerPlugin(),//去重壓縮css

JS代碼壓縮

JS代碼壓縮使用terser-webpack-plugin，實(shí)現(xiàn)打包后JS代碼的壓縮

代碼的壓縮比較耗時(shí)間，所以只用在打包項(xiàng)目時(shí)，所以只需要在d.js中配置

npmiterser-webpack-plugin-D

//d.js

constTerserPlugin=require('terser-webpack-plugin')

optimization:{

minimizer:[

newCssMinimizerPlugin(),//去重壓縮css

newTerserPlugin({//壓縮JS代碼

terserOptions:{

compress:{

drop_console:true,//去除console

}),//壓縮JavaScript

tree-shaking

tree-shaking簡單說作用就是：只打包用到的代碼，沒用到的代碼不打包，而webpack5默認(rèn)開啟tree-shaking，當(dāng)打包的mode為production時(shí)，自動(dòng)開啟tree-shaking進(jìn)行優(yōu)化

module.exports={

mode:'production'

source-map類型

source-map的作用是：方便你報(bào)錯(cuò)的時(shí)候能定位到錯(cuò)誤代碼的位置。它的體積不容小覷，所以對于不同環(huán)境設(shè)置不同的類型是很有必要的。

開發(fā)環(huán)境的時(shí)候我們需要能精準(zhǔn)定位錯(cuò)誤代碼的位置

//webpack.dev.js

module.exports={

mode:'development',

devtool:'eval-cheap-module-source-map'

生產(chǎn)環(huán)境，我們想開啟source-map，但是又不想體積太大，那么可以換一種類型

//d.js

module.exports={

mode:'production',

devtool:'nosources-source-map'

打包體積分析

使用webpack-bundle-analyzer可以審查打包后的體積分布，進(jìn)而進(jìn)行相應(yīng)的體積優(yōu)化

只需要打包時(shí)看體積，所以只需在d.js中配置

npmiwebpack-bundle-analyzer-D

//d.js

const{

BundleAnalyzerPlugin

}=require('webpack-bundle-analyzer')

plugins:[

newBundleAnalyzerPlugin(),

用戶體驗(yàn)優(yōu)化

模塊懶加載

如果不進(jìn)行模塊懶加載的話，最后整個(gè)項(xiàng)目代碼都會被打包到一個(gè)js文件里，單個(gè)js文件體積非常大，那么當(dāng)用戶網(wǎng)頁請求的時(shí)候，首屏加載時(shí)間會比較長，使用模塊懶加載之后，大js文件會分成多個(gè)小js文件，網(wǎng)頁加載時(shí)會按需加載，大大提升首屏加載速度

//src/router/index.js

constroutes=[

path:'/login',

name:'login',

component:login

path:'/home',

name:'home',

//懶加載

component:()=import('../views/home/home.vue'),

Gzip

開啟Gzip后，大大提高用戶的頁面加載速度，因?yàn)間zip的體積比原文件小很多，當(dāng)然需要后端的配合，使用compression-webpack-plugin

只需要打包時(shí)優(yōu)化體積，所以只需在d.js中配置

npmicompression-webpack-plugin-D

//d.js

constCompressionPlugin=require('compression-webpack-plugin')

plugins:[

//之前的代碼...

//gzip

newCompressionPlugin({

algorithm:'gzip',

threshold:10240,

minRatio:0.8

小圖片轉(zhuǎn)base64

對于一些小圖片，可以轉(zhuǎn)base64，這樣可以減少用戶的http網(wǎng)絡(luò)請求次數(shù)，提高用戶的體驗(yàn)。webpack5中url-loader已被廢棄，改用asset-module

在webpack.base.js中配置

//webpack.base.js

test:/\.(png|jpeg|gif|svg|webp)$/,

type:'asset',

parser:{

//轉(zhuǎn)base64的條件

dataUrlCondition:{

maxSize:25*1024,//25kb

generator:{

//打包到image文件下

filename:'images/[contenthash][ext][query]',

合理配置hash

我們要保證，改過的文件需要更新hash值，而沒改過的文件依然保持原本的hash值，這樣才能保證在上線后，瀏覽器訪問時(shí)沒有改變的文件會命中緩存，從而達(dá)到性能優(yōu)化的目的

在webpack.base.j