前端必會的Webpack優化技巧

2022-07-04 18:01:12

webpack優化很有必要

上一篇文章給大家講解了簡單搭建一個Vuecli，但是隻是基本搭建，而沒有進行進一步的優化。

而使用webpack打包躲不開的就是webpack優化這個話題，無論是面試還是實際開發，優化都是非常重要的事情，畢竟提升使用者體驗是我們前端工程師的職責

構建時間優化

首先就是構建時間的優化了

thread-loader

多程序打包，可以大大提高構建的速度，使用方法是將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

快取資源，提高二次構建的速度，使用方法是將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'
        ],
},

開啟熱更新

比如你修改了專案中某一個檔案，會導致整個專案重新整理，這非常耗時間。如果只重新整理修改的這個模組，其他保持原狀，那將大大提高修改程式碼的重新構建時間

只用於開發中，所以設定在webpack.dev.js

// webpack.dev.js
//引入webpack
const webpack = require('webpack');
//使用webpack提供的熱更新外掛
   plugins: [
   new webpack.HotModuleReplacementPlugin()
    ],
    //最後需要在我們的devserver中設定
     devServer: {
+     hot: true
    },

exclude & include

exclude：不需要處理的檔案

include：需要處理的檔案

合理設定這兩個屬性，可以大大提高構建速度

在webpack.base.js中設定

// webpack.base.js
      {
        test: /.js$/,
        //使用include來指定編譯資料夾
        include: path.resolve(__dirname, '../src'),
        //使用exclude排除指定資料夾
        exclude: /node_modules/,
        use: [
          'babel-loader'
        ]
      },

構建區分環境

區分環境去構建是非常重要的，我們要明確知道，開發環境時我們需要哪些設定，不需要哪些設定；而最終打包生產環境時又需要哪些設定，不需要哪些設定：

開發環境：去除程式碼壓縮、gzip、體積分析等優化的設定，大大提高構建速度
生產環境：需要程式碼壓縮、gzip、體積分析等優化的設定，大大降低最終專案打包體積

上篇文章已經帶大家進行了環境區分

提升webpack版本

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

打包體積優化

主要是打包後專案整體體積的優化，有利於專案上線後的頁面載入速度提升

本專案已經是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，實現打包後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，當打包的mode為production時，自動開啟tree-shaking進行優化

module.exports = {
  mode: 'production'
}

source-map型別

source-map的作用是：方便你報錯的時候能定位到錯誤程式碼的位置。它的體積不容小覷，所以對於不同環境設定不同的型別是很有必要的。

開發環境

開發環境的時候我們需要能精準定位錯誤程式碼的位置

// webpack.dev.js
module.exports = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map'
}

生產環境

生產環境，我們想開啟source-map，但是又不想體積太大，那麼可以換一種型別

// webpack.prod.js
module.exports = {
  mode: 'production',
  devtool: 'nosources-source-map'
}

打包體積分析

使用webpack-bundle-analyzer可以審查打包後的體積分佈，進而進行相應的體積優化

只需要打包時看體積，所以只需在webpack.prod.js中設定

npm i webpack-bundle-analyzer -D

// webpack.prod.js
const {
  BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer')
  plugins: [
    new BundleAnalyzerPlugin(),
]

使用者體驗優化

模組懶載入

如果不進行模組懶載入的話，最後整個專案程式碼都會被打包到一個js檔案裡，單個js檔案體積非常大，那麼當用戶網頁請求的時候，首屏載入時間會比較長，使用模組懶載入之後，大js檔案會分成多個小js檔案，網頁載入時會按需載入，大大提升首屏載入速度

// 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的體積比原檔案小很多，當然需要後端的配合，使用compression-webpack-plugin

只需要打包時優化體積，所以只需在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
    })
  ]

小圖片轉base64

對於一些小圖片，可以轉base64，這樣可以減少使用者的http網路請求次數，提高使用者的體驗。webpack5中url-loader已被廢棄，改用asset-module

在webpack.base.js中設定

// webpack.base.js
{
   test: /.(png|jpe?g|gif|svg|webp)$/,
   type: 'asset',
   parser: {
     // 轉base64的條件
     dataUrlCondition: {
        maxSize: 25 * 1024, // 25kb
     }
   },
   generator: {
     // 打包到 image 檔案下
    filename: 'images/[contenthash][ext][query]',
   },
},

合理設定hash

我們要保證，改過的檔案需要更新hash值，而沒改過的檔案依然保持原本的hash值，這樣才能保證在上線後，瀏覽器存取時沒有改變的檔案會命中快取，從而達到效能優化的目的

在webpack.base.js中設定

// webpack.base.js
  output: {
    path: path.resolve(__dirname, '../dist'),
    // 給js檔案加上 contenthash
    filename: 'js/chunk-[contenthash].js',
    clean: true,
  },

以上就是前端必會的Webpack優化技巧的詳細內容，更多關於前端Webpack優化技巧的資料請關注it145.com其它相關文章！