前端必會的Webpack優(yōu)化技巧
webpack優(yōu)化很有必要
上一篇文章給大家講解了簡單搭建一個Vuecli，但是只是基本搭建，而沒有進行進一步的優(yōu)化。
而使用webpack打包躲不開的就是webpack優(yōu)化這個話題，無論是面試還是實際開發(fā)，優(yōu)化都是非常重要的事情，畢竟提升用戶體驗是我們前端工程師的職責(zé)
構(gòu)建時間優(yōu)化
首先就是構(gòu)建時間的優(yōu)化了
thread-loader
多進程打包，可以大大提高構(gòu)建的速度，使用方法是將thread-loader放在比較費時間的loader之前，比如babel-loader
由于啟動項目和打包項目都需要加速，所以配置在webpack.base.js
npm i thread-loader -D
// webpack.base.js
{
test: /\.js$/,
use: [
'thread-loader',
'babel-loader'
],
}
}
cache-loader
緩存資源，提高二次構(gòu)建的速度，使用方法是將cache-loader放在比較費時間的loader之前，比如babel-loader
由于啟動項目和打包項目都需要加速，所以配置在webpack.base.js
npm i cache-loader -D
// webpack.base.js
{
test: /\.js$/,
use: [
'cache-loader',
'thread-loader',
'babel-loader'
],
},
開啟熱更新
比如你修改了項目中某一個文件，會導(dǎo)致整個項目刷新，這非常耗時間。如果只刷新修改的這個模塊，其他保持原狀，那將大大提高修改代碼的重新構(gòu)建時間
只用于開發(fā)中，所以配置在webpack.dev.js
// webpack.dev.js
//引入webpack
const webpack = require('webpack');
//使用webpack提供的熱更新插件
plugins: [
new webpack.HotModuleReplacementPlugin()
],
//最后需要在我們的devserver中配置
devServer: {
+ hot: true
},
exclude & include
exclude：不需要處理的文件
include：需要處理的文件
合理設(shè)置這兩個屬性，可以大大提高構(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)境時我們需要哪些配置，不需要哪些配置；而最終打包生產(chǎn)環(huán)境時又需要哪些配置，不需要哪些配置：
- 開發(fā)環(huán)境：去除代碼壓縮、gzip、體積分析等優(yōu)化的配置，大大提高構(gòu)建速度
- 生產(chǎn)環(huán)境：需要代碼壓縮、gzip、體積分析等優(yōu)化的配置，大大降低最終項目打包體積
上篇文章已經(jīng)帶大家進行了環(huán)境區(qū)分
提升webpack版本
webpack版本越新，打包的效果肯定更好
打包體積優(yōu)化
主要是打包后項目整體體積的優(yōu)化，有利于項目上線后的頁面加載速度提升
本項目已經(jīng)是webpack最新版本
CSS代碼壓縮
CSS代碼壓縮使用css-minimizer-webpack-plugin，效果包括壓縮、去重
代碼的壓縮比較耗時間，所以只用在打包項目時，所以只需要在webpack.prod.js中配置
npm i css-minimizer-webpack-plugin -D
// webpack.prod.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
optimization: {
minimizer: [
new CssMinimizerPlugin(), // 去重壓縮css
],
}
JS代碼壓縮
JS代碼壓縮使用terser-webpack-plugin，實現(xiàn)打包后JS代碼的壓縮
代碼的壓縮比較耗時間，所以只用在打包項目時，所以只需要在webpack.prod.js中配置
npm i terser-webpack-plugin -D
// webpack.prod.js
const TerserPlugin = require('terser-webpack-plugin')
optimization: {
minimizer: [
new CssMinimizerPlugin(), // 去重壓縮css
new TerserPlugin({ // 壓縮JS代碼
terserOptions: {
compress: {
drop_console: true, // 去除console
},
},
}), // 壓縮JavaScript
],
}
tree-shaking
tree-shaking簡單說作用就是：只打包用到的代碼，沒用到的代碼不打包，而webpack5默認開啟tree-shaking，當(dāng)打包的mode為production時，自動開啟tree-shaking進行優(yōu)化
module.exports = {
mode: 'production'
}
source-map類型
source-map的作用是：方便你報錯的時候能定位到錯誤代碼的位置。它的體積不容小覷，所以對于不同環(huán)境設(shè)置不同的類型是很有必要的。
- 開發(fā)環(huán)境
開發(fā)環(huán)境的時候我們需要能精準(zhǔn)定位錯誤代碼的位置
// webpack.dev.js
module.exports = {
mode: 'development',
devtool: 'eval-cheap-module-source-map'
}
- 生產(chǎn)環(huán)境
生產(chǎn)環(huán)境，我們想開啟source-map，但是又不想體積太大，那么可以換一種類型
// webpack.prod.js
module.exports = {
mode: 'production',
devtool: 'nosources-source-map'
}
打包體積分析
使用webpack-bundle-analyzer可以審查打包后的體積分布，進而進行相應(yīng)的體積優(yōu)化
只需要打包時看體積，所以只需在webpack.prod.js中配置
npm i webpack-bundle-analyzer -D
// webpack.prod.js
const {
BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer')
plugins: [
new BundleAnalyzerPlugin(),
]
用戶體驗優(yōu)化
模塊懶加載
如果不進行模塊懶加載的話，最后整個項目代碼都會被打包到一個js文件里，單個js文件體積非常大，那么當(dāng)用戶網(wǎng)頁請求的時候，首屏加載時間會比較長，使用模塊懶加載之后，大js文件會分成多個小js文件，網(wǎng)頁加載時會按需加載，大大提升首屏加載速度
// src/router/index.js
const routes = [
{
path: '/login',
name: 'login',
component: login
},
{
path: '/home',
name: 'home',
// 懶加載
component: () => import('../views/home/home.vue'),
},
]
Gzip
開啟Gzip后，大大提高用戶的頁面加載速度，因為gzip的體積比原文件小很多，當(dāng)然需要后端的配合，使用compression-webpack-plugin
只需要打包時優(yōu)化體積，所以只需在webpack.prod.js中配置
npm i compression-webpack-plugin -D
// webpack.prod.js
const CompressionPlugin = require('compression-webpack-plugin')
plugins: [
// 之前的代碼...
// gzip
new CompressionPlugin({
algorithm: 'gzip',
threshold: 10240,
minRatio: 0.8
})
]
小圖片轉(zhuǎn)base64
對于一些小圖片，可以轉(zhuǎn)base64，這樣可以減少用戶的http網(wǎng)絡(luò)請求次數(shù)，提高用戶的體驗。webpack5中url-loader已被廢棄，改用asset-module
在webpack.base.js中配置
// webpack.base.js
{
test: /\.(png|jpe?g|gif|svg|webp)$/,
type: 'asset',
parser: {
// 轉(zhuǎn)base64的條件
dataUrlCondition: {
maxSize: 25 * 1024, // 25kb
}
},
generator: {
// 打包到 image 文件下
filename: 'images/[contenthash][ext][query]',
},
},
合理配置hash
我們要保證，改過的文件需要更新hash值，而沒改過的文件依然保持原本的hash值，這樣才能保證在上線后，瀏覽器訪問時沒有改變的文件會命中緩存，從而達到性能優(yōu)化的目的
在webpack.base.js中配置
// webpack.base.js
output: {
path: path.resolve(__dirname, '../dist'),
// 給js文件加上 contenthash
filename: 'js/chunk-[contenthash].js',
clean: true,
},以上就是前端必會的Webpack優(yōu)化技巧的詳細內(nèi)容，更多關(guān)于前端Webpack優(yōu)化技巧的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡易留言板增刪功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了小程序中的箭頭函數(shù)的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
JS實現(xiàn)盒子跟著鼠標(biāo)移動及鍵盤方向鍵控制盒子移動效果示例
這篇文章主要介紹了JS實現(xiàn)盒子跟著鼠標(biāo)移動及鍵盤方向鍵控制盒子移動效果,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
這篇文章主要為大家介紹了javascript函數(shù)進階，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-12-12
JavaScript面試之如何實現(xiàn)數(shù)組拍平（扁平化）方法
數(shù)組扁平化是指將一個多維數(shù)組變?yōu)橐痪S數(shù)組,下面這篇文章主要給大家介紹了關(guān)于JavaScript面試之如何實現(xiàn)數(shù)組拍平（扁平化）方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了JS中的const命令你真懂它嗎，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
最好用的省市二級聯(lián)動 原生js實現(xiàn)你值得擁有
省市二級聯(lián)動效果，實現(xiàn)方法有很多，不過其他文章中介紹的都比較籠統(tǒng)，在本文有一個詳細的實現(xiàn)過程，使用原生js很容易理解，希望大家可以參考下2013-09-09
Bootstrap3 多個模態(tài)對話框無法顯示的解決方案
這篇文章主要介紹了Bootstrap3 多個模態(tài)對話框無法顯示的解決方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
計數(shù)排序是一種高效的線性排序，它通過計算一個集合中元素楚翔的次數(shù)來確定集合如何排列，計數(shù)排序不需要進行數(shù)據(jù)的比較，所有他的運行效率前面介紹的都高2014-04-04
js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子
這篇文章介紹了js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子，有需要的朋友可以參考一下2013-10-10