前端必會(huì)的Webpack優(yōu)化技巧
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
npm i thread-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
npm i cache-loader -D
// webpack.base.js { test: /\.js$/, use: [ 'cache-loader', 'thread-loader', 'babel-loader' ], },
開啟熱更新
比如你修改了項(xiàng)目中某一個(gè)文件,會(huì)導(dǎo)致整個(gè)項(xiàng)目刷新,這非常耗時(shí)間。如果只刷新修改的這個(gè)模塊,其他保持原狀,那將大大提高修改代碼的重新構(gòu)建時(shí)間
只用于開發(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è)屬性,可以大大提高構(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í),所以只需要在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
,實(shí)現(xiàn)打包后JS代碼的壓縮
代碼的壓縮比較耗時(shí)間,所以只用在打包項(xiàng)目時(shí),所以只需要在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
默認(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)境
開發(fā)環(huán)境的時(shí)候我們需要能精準(zhǔn)定位錯(cuò)誤代碼的位置
// 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
可以審查打包后的體積分布,進(jìn)而進(jìn)行相應(yīng)的體積優(yōu)化
只需要打包時(shí)看體積,所以只需在webpack.prod.js
中配置
npm i webpack-bundle-analyzer -D
// webpack.prod.js const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') plugins: [ new BundleAnalyzerPlugin(), ]
用戶體驗(yàn)優(yōu)化
模塊懶加載
如果不進(jìn)行模塊懶加載的話,最后整個(gè)項(xiàng)目代碼都會(huì)被打包到一個(gè)js文件里,單個(gè)js文件體積非常大,那么當(dāng)用戶網(wǎng)頁請求的時(shí)候,首屏加載時(shí)間會(huì)比較長,使用模塊懶加載之后,大js文件會(huì)分成多個(gè)小js文件,網(wǎng)頁加載時(shí)會(huì)按需加載,大大提升首屏加載速度
// src/router/index.js const routes = [ { 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)化體積,所以只需在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ù),提高用戶的體驗(yàn)。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值,這樣才能保證在上線后,瀏覽器訪問時(shí)沒有改變的文件會(huì)命中緩存,從而達(dá)到性能優(yōu)化的目的
在webpack.base.js
中配置
// webpack.base.js output: { path: path.resolve(__dirname, '../dist'), // 給js文件加上 contenthash filename: 'js/chunk-[contenthash].js', clean: true, },
以上就是前端必會(huì)的Webpack優(yōu)化技巧的詳細(xì)內(nèi)容,更多關(guān)于前端Webpack優(yōu)化技巧的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS實(shí)現(xiàn)盒子跟著鼠標(biāo)移動(dòng)及鍵盤方向鍵控制盒子移動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)盒子跟著鼠標(biāo)移動(dòng)及鍵盤方向鍵控制盒子移動(dòng)效果,涉及javascript事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01JavaScript面試之如何實(shí)現(xiàn)數(shù)組拍平(扁平化)方法
數(shù)組扁平化是指將一個(gè)多維數(shù)組變?yōu)橐痪S數(shù)組,下面這篇文章主要給大家介紹了關(guān)于JavaScript面試之如何實(shí)現(xiàn)數(shù)組拍平(扁平化)方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-11-11最好用的省市二級聯(lián)動(dòng) 原生js實(shí)現(xiàn)你值得擁有
省市二級聯(lián)動(dòng)效果,實(shí)現(xiàn)方法有很多,不過其他文章中介紹的都比較籠統(tǒng),在本文有一個(gè)詳細(xì)的實(shí)現(xiàn)過程,使用原生js很容易理解,希望大家可以參考下2013-09-09Bootstrap3 多個(gè)模態(tài)對話框無法顯示的解決方案
這篇文章主要介紹了Bootstrap3 多個(gè)模態(tài)對話框無法顯示的解決方案,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02Javascript排序算法之計(jì)數(shù)排序的實(shí)例
計(jì)數(shù)排序是一種高效的線性排序,它通過計(jì)算一個(gè)集合中元素楚翔的次數(shù)來確定集合如何排列,計(jì)數(shù)排序不需要進(jìn)行數(shù)據(jù)的比較,所有他的運(yùn)行效率前面介紹的都高2014-04-04js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子
這篇文章介紹了js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子,有需要的朋友可以參考一下2013-10-10