本篇內(nèi)容主要講解“如何利用Webpack來(lái)優(yōu)化前端性能”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何利用Webpack來(lái)優(yōu)化前端性能”吧!
穆棱網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),穆棱網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為穆棱成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的穆棱做網(wǎng)站的公司定做！
隨著前端的項(xiàng)目逐漸擴(kuò)大，必然會(huì)帶來(lái)的一個(gè)問(wèn)題就是性能
尤其在大型復(fù)雜的項(xiàng)目中，前端業(yè)務(wù)可能因?yàn)橐粋€(gè)小小的數(shù)據(jù)依賴(lài)，導(dǎo)致整個(gè)頁(yè)面卡頓甚至奔潰
一般項(xiàng)目在完成后，會(huì)通過(guò)webpack進(jìn)行打包，利用webpack對(duì)前端項(xiàng)目性能優(yōu)化是一個(gè)十分重要的環(huán)節(jié)
通過(guò)webpack優(yōu)化前端的手段有：
JS代碼壓縮
CSS代碼壓縮
Html文件代碼壓縮
文件大小壓縮
圖片壓縮
Tree Shaking
代碼分離
內(nèi)聯(lián) chunk
JS代碼壓縮
terser是一個(gè)JavaScript的解釋、絞肉機(jī)、壓縮機(jī)的工具集，可以幫助我們壓縮、丑化我們的代碼，讓bundle更小
在production模式下，webpack 默認(rèn)就是使用 TerserPlugin 來(lái)處理我們的代碼的。如果想要自定義配置它，配置方法如下：
重慶分公司
重慶分公司
const TerserPlugin = require('terser-webpack-plugin') module.exports = { ... optimization: { minimize: true, minimizer: [ new TerserPlugin({ parallel: true // 電腦cpu核數(shù)-1 }) ] } }屬性介紹如下：
extractComments：默認(rèn)值為true，表示會(huì)將注釋抽取到一個(gè)單獨(dú)的文件中，開(kāi)發(fā)階段，我們可設(shè)置為 false ，不保留注釋
parallel：使用多進(jìn)程并發(fā)運(yùn)行提高構(gòu)建的速度，默認(rèn)值是true，并發(fā)運(yùn)行的默認(rèn)數(shù)量：os.cpus().length - 1
terserOptions：設(shè)置我們的terser相關(guān)的配置：
compress：設(shè)置壓縮相關(guān)的選項(xiàng)，mangle：設(shè)置丑化相關(guān)的選項(xiàng)，可以直接設(shè)置為true
mangle：設(shè)置丑化相關(guān)的選項(xiàng)，可以直接設(shè)置為true
toplevel：底層變量是否進(jìn)行轉(zhuǎn)換
keep_classnames：保留類(lèi)的名稱(chēng)
keep_fnames：保留函數(shù)的名稱(chēng)
CSS代碼壓縮
CSS壓縮通常是去除無(wú)用的空格等，因?yàn)楹茈y去修改選擇器、屬性的名稱(chēng)、值等
CSS的壓縮我們可以使用另外一個(gè)插件：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({ parallel: true }) ] } }Html文件代碼壓縮
使用HtmlWebpackPlugin插件來(lái)生成HTML的模板時(shí)候，通過(guò)配置屬性minify進(jìn)行html優(yōu)化
module.exports = { ... plugin:[ new HtmlwebpackPlugin({ ... minify:{ minifyCSS:false, // 是否壓縮css collapseWhitespace:false, // 是否折疊空格 removeComments:true // 是否移除注釋 } }) ] }設(shè)置了minify，實(shí)際會(huì)使用另一個(gè)插件html-minifier-terser
文件大小壓縮
對(duì)文件的大小進(jìn)行壓縮，減少http傳輸過(guò)程中寬帶的損耗
npm install compression-webpack-plugin -D
new ComepressionPlugin({ test:/\.(css|js)$/, // 哪些文件需要壓縮 threshold:500, // 設(shè)置文件多大開(kāi)始?jí)嚎s minRatio:0.7, // 至少壓縮的比例 algorithm:"gzip", // 采用的壓縮算法 })圖片壓縮
一般來(lái)說(shuō)在打包之后，一些圖片文件的大小是遠(yuǎn)遠(yuǎn)要比 js 或者 css 文件要來(lái)的大，所以圖片壓縮較為重要
配置方法如下：
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 為關(guān)閉 optipng: { enabled: false, }, // 使用 imagemin-pngquant 壓縮 png pngquant: { quality: '65-90', speed: 4 }, // 壓縮 gif 的配置 gifsicle: { interlaced: false, }, // 開(kāi)啟 webp，會(huì)把 jpg 和 png 圖片壓縮為 webp 格式 webp: { quality: 75 } } } ] }, ] }Tree Shaking
Tree Shaking 是一個(gè)術(shù)語(yǔ)，在計(jì)算機(jī)中表示消除死代碼，依賴(lài)于ES Module的靜態(tài)語(yǔ)法分析(不執(zhí)行任何的代碼，可以明確知道模塊的依賴(lài)關(guān)系)
在webpack實(shí)現(xiàn)Trss shaking有兩種不同的方案：
usedExports：通過(guò)標(biāo)記某些函數(shù)是否被使用，之后通過(guò)Terser來(lái)進(jìn)行優(yōu)化的
sideEffects：跳過(guò)整個(gè)模塊/文件，直接查看該文件是否有副作用
兩種不同的配置方案， 有不同的效果
usedExports
配置方法也很簡(jiǎn)單，只需要將usedExports設(shè)為true
module.exports = { ... optimization:{ usedExports } }使用之后，沒(méi)被用上的代碼在webpack打包中會(huì)加入unused harmony export mul注釋?zhuān)脕?lái)告知 Terser 在優(yōu)化時(shí)，可以刪除掉這段代碼
如下面sum函數(shù)沒(méi)被用到，webpack打包會(huì)添加注釋?zhuān)瑃erser在優(yōu)化時(shí)，則將該函數(shù)去掉
sideEffects
sideEffects用于告知webpack compiler哪些模塊時(shí)有副作用，配置方法是在package.json中設(shè)置sideEffects屬性
如果sideEffects設(shè)置為false，就是告知webpack可以安全的刪除未用到的exports
如果有些文件需要保留，可以設(shè)置為數(shù)組的形式
"sideEffecis":[ "./src/util/format.js", "*.css" // 所有的css文件 ]
上述都是關(guān)于javascript的tree shaking，css同樣也能夠?qū)崿F(xiàn)tree shaking
css tree shaking
css進(jìn)行tree shaking優(yōu)化可以安裝PurgeCss插件
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"] } } }) ] }paths：表示要檢測(cè)哪些目錄下的內(nèi)容需要被分析，配合使用glob
默認(rèn)情況下，Purgecss會(huì)將我們的html標(biāo)簽的樣式移除掉，如果我們希望保留，可以添加一個(gè)safelist的屬性
將代碼分離到不同的bundle中，之后我們可以按需加載，或者并行加載這些文件
默認(rèn)情況下，所有的JavaScript代碼(業(yè)務(wù)代碼、第三方依賴(lài)、暫時(shí)沒(méi)有用到的模塊)在首頁(yè)全部都加載，就會(huì)影響首頁(yè)的加載速度
代碼分離可以分出出更小的bundle，以及控制資源加載優(yōu)先級(jí)，提供代碼的加載性能
這里通過(guò)splitChunksPlugin來(lái)實(shí)現(xiàn)，該插件webpack已經(jīng)默認(rèn)安裝和集成，只需要配置即可
默認(rèn)配置中，chunks僅僅針對(duì)于異步(async)請(qǐng)求，我們可以設(shè)置為initial或者all
module.exports = { ... optimization:{ splitChunks:{ chunks:"all" } } }splitChunks主要屬性有如下：
Chunks，對(duì)同步代碼還是異步代碼進(jìn)行處理
minSize：拆分包的大小, 至少為minSize，如何包的大小不超過(guò)minSize，這個(gè)包不會(huì)拆分
maxSize：將大于maxSize的包，拆分為不小于minSize的包
minChunks：被引入的次數(shù)，默認(rèn)是1
內(nèi)聯(lián)chunk
可以通過(guò)InlineChunkHtmlPlugin插件將一些chunk的模塊內(nèi)聯(lián)到html，如runtime的代碼(對(duì)模塊進(jìn)行解析、加載、模塊信息相關(guān)的代碼)，代碼量并不大，但是必須加載的
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { ... plugin:[ new InlineChunkHtmlPlugin(HtmlWebpackPlugin,[/runtime.+\.js/] }到此，相信大家對(duì)“如何利用Webpack來(lái)優(yōu)化前端性能”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！
