建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自微信公眾號「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請聯(lián)系JS每日一題公眾號。
成都創(chuàng)新互聯(lián)公司專注于杜爾伯特網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供杜爾伯特營銷型網(wǎng)站建設(shè)，杜爾伯特網(wǎng)站制作、杜爾伯特網(wǎng)頁設(shè)計(jì)、杜爾伯特網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造杜爾伯特網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供杜爾伯特網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
一、背景
隨著前端的項(xiàng)目逐漸擴(kuò)大，必然會帶來的一個(gè)問題就是性能
尤其在大型復(fù)雜的項(xiàng)目中，前端業(yè)務(wù)可能因?yàn)橐粋€(gè)小小的數(shù)據(jù)依賴，導(dǎo)致整個(gè)頁面卡頓甚至奔潰
一般項(xiàng)目在完成后，會通過webpack進(jìn)行打包，利用webpack對前端項(xiàng)目性能優(yōu)化是一個(gè)十分重要的環(huán)節(jié)
二、如何優(yōu)化
通過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 來處理我們的代碼的。如果想要自定義配置它，配置方法如下：
- const TerserPlugin = require('terser-webpack-plugin')
- module.exports = {
- ...
- optimization: {
- minimize: true,
- minimizer: [
- new TerserPlugin({
- parallel: true // 電腦cpu核數(shù)-1
- })
- ]
- }
- }
屬性介紹如下：
- extractComments：默認(rèn)值為true，表示會將注釋抽取到一個(gè)單獨(dú)的文件中，開發(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：保留類的名稱
- keep_fnames：保留函數(shù)的名稱
CSS代碼壓縮
CSS壓縮通常是去除無用的空格等，因?yàn)楹茈y去修改選擇器、屬性的名稱、值等
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插件來生成HTML的模板時(shí)候，通過配置屬性minify進(jìn)行html優(yōu)化
- module.exports = {
- ...
- plugin:[
- new HtmlwebpackPlugin({
- ...
- minify:{
- minifyCSS:false, // 是否壓縮css
- collapseWhitespace:false, // 是否折疊空格
- removeComments:true // 是否移除注釋
- }
- })
- ]
- }
設(shè)置了minify，實(shí)際會使用另一個(gè)插件html-minifier-terser
文件大小壓縮
對文件的大小進(jìn)行壓縮，減少http傳輸過程中寬帶的損耗
- npm install compression-webpack-plugin -D
- new ComepressionPlugin({
- test:/\.(css|js)$/, // 哪些文件需要壓縮
- threshold:500, // 設(shè)置文件多大開始壓縮
- minRatio:0.7, // 至少壓縮的比例
- algorithm:"gzip", // 采用的壓縮算法
- })
圖片壓縮
一般來說在打包之后，一些圖片文件的大小是遠(yuǎn)遠(yuǎn)要比 js 或者 css 文件要來的大，所以圖片壓縮較為重要
配置方法如下：
- 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,
- },
- // 開啟 webp，會把 jpg 和 png 圖片壓縮為 webp 格式
- webp: {
- quality: 75
- }
- }
- }
- ]
- },
- ]
- }
Tree Shaking
Tree Shaking 是一個(gè)術(shù)語，在計(jì)算機(jī)中表示消除死代碼，依賴于ES Module的靜態(tài)語法分析(不執(zhí)行任何的代碼，可以明確知道模塊的依賴關(guān)系)
在webpack實(shí)現(xiàn)Trss shaking有兩種不同的方案：
- usedExports：通過標(biāo)記某些函數(shù)是否被使用，之后通過Terser來進(jìn)行優(yōu)化的
- sideEffects：跳過整個(gè)模塊/文件，直接查看該文件是否有副作用
兩種不同的配置方案， 有不同的效果
usedExports
配置方法也很簡單，只需要將usedExports設(shè)為true
- module.exports = {
- ...
- optimization:{
- usedExports
- }
- }
使用之后，沒被用上的代碼在webpack打包中會加入unused harmony export mul注釋，用來告知 Terser 在優(yōu)化時(shí)，可以刪除掉這段代碼
如下面sum函數(shù)沒被用到，webpack打包會添加注釋，terser在優(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：表示要檢測哪些目錄下的內(nèi)容需要被分析，配合使用glob
默認(rèn)情況下，Purgecss會將我們的html標(biāo)簽的樣式移除掉，如果我們希望保留，可以添加一個(gè)safelist的屬性
代碼分離
將代碼分離到不同的bundle中，之后我們可以按需加載，或者并行加載這些文件
默認(rèn)情況下，所有的JavaScript代碼(業(yè)務(wù)代碼、第三方依賴、暫時(shí)沒有用到的模塊)在首頁全部都加載，就會影響首頁的加載速度
代碼分離可以分出出更小的bundle，以及控制資源加載優(yōu)先級，提供代碼的加載性能
這里通過splitChunksPlugin來實(shí)現(xiàn)，該插件webpack已經(jīng)默認(rèn)安裝和集成，只需要配置即可
默認(rèn)配置中，chunks僅僅針對于異步(async)請求，我們可以設(shè)置為initial或者all
- module.exports = {
- ...
- optimization:{
- splitChunks:{
- chunks:"all"
- }
- }
- }
splitChunks主要屬性有如下：
- Chunks，對同步代碼還是異步代碼進(jìn)行處理
- minSize：拆分包的大小, 至少為minSize，如何包的大小不超過minSize，這個(gè)包不會拆分
- maxSize：將大于maxSize的包，拆分為不小于minSize的包
- minChunks：被引入的次數(shù)，默認(rèn)是1
內(nèi)聯(lián)chunk
可以通過InlineChunkHtmlPlugin插件將一些chunk的模塊內(nèi)聯(lián)到html，如runtime的代碼(對模塊進(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/]
- }
三、總結(jié)
關(guān)于webpack對前端性能的優(yōu)化，可以通過文件體積大小入手，其次還可通過分包的形式、減少http請求次數(shù)等方式，實(shí)現(xiàn)對前端性能的優(yōu)化
參考文獻(xiàn)
https://zhuanlan.zhihu.com/p/139498741
https://vue3js.cn/interview/
新聞名稱：面試官：說說你是如何利用Webpack來優(yōu)化前端性能的？
分享URL：http://www.dlmjj.cn/article/dpphpoi.html
