深入了解 npm run build:stage

一、概述

npm run build:stage 是一個基於 npm 的項目構建命令，用於在生產環境下構建項目代碼。在開發區分不同環境的情況下，我們通常會配置多個構建命令，如 build:dev、build:prod、build:test 等。而 build:stage 則是一個在生產環境測試階段使用的構建命令。

在 build:stage 中，我們可以通過區分開發和生產的代碼邏輯以及不同的資源路徑等，進行更加準確的測試和排錯。

二、配置環境變數

在使用 build:stage 進行項目構建時，我們通常需要在代碼中配置一些環境變數。在 webpack 的配置文件中，通過 process.env.NODE_ENV 可以判斷當前環境是否為生產環境，從而進行相應的設置。但在 build:stage 中，我們需要區分出不同的測試環境，在 package.json 中通過 –env 參數傳遞不同的環境變數，從而實現不同的配置。例如：

 "scripts": {  
   "build:stage": "webpack --mode production --env.stage=test --env.apiPath=www.test.com" 
 } 

在上述配置中，我們將 stage 屬性設置為 test，apiPath 屬性設置為 www.test.com，這些環境變數可以在 webpack 配置文件中通過 process.env 來獲取。

三、優化構建和打包過程

在使用 npm run build:stage 進行項目構建時，我們可以進行一些性能優化，例如代碼分離、壓縮混淆、緩存等，從而提高構建和打包的效率。以下是一些簡單的優化方法：

• 代碼分離：在 webpack 配置文件中使用 optimization.splitChunks 對代碼進行拆分，將公共代碼和第三方依賴庫拆分成獨立的 chunk 文件，從而減少重複載入和請求，提高頁面載入速度和性能。

• 壓縮混淆：在 webpack 配置文件中使用 optimization.minimize 對代碼進行壓縮和混淆，減小文件體積，提高載入速度。

• 緩存：通過配置 output.filename 和 output.chunkFilename，將構建生成的文件名添加 hash 值，從而避免瀏覽器緩存舊文件。

四、合理使用插件

在 build:stage 中，我們可以使用一些插件來實現更加高級的功能，例如 HTMLWebpackPlugin、CleanWebpackPlugin 等。以下是一些常用插件的介紹：

• HTMLWebpackPlugin：將打包生成後的 css 和 js 嵌入到模板 HTML 文件中，並自動生成 HTML 文件。

• CleanWebpackPlugin：在每次構建前清空輸出目錄，從而保證每次構建生成的文件不會覆蓋之前生成的文件。

• MiniCssExtractPlugin：將 css 文件生成獨立的文件，從而減少 js 文件體積。

五、管理資源文件

在項目構建時，我們需要對各種資源文件進行管理和處理，例如圖片、字體、樣式表等等。在 webpack 配置文件中，我們可以通過設置不同的 loader 對各種資源文件進行處理和轉換。

module: {
  rules: [
    {
      test: /\.(gif|png|jpe?g|svg)$/i,
      use: [
        'file-loader',   // 處理文件
        {
          loader: 'image-webpack-loader',   // 圖片壓縮
          options: {
            mozjpeg: {
              progressive: true,
              quality: 65
            },
            optipng: {
              enabled: false,
            },
            pngquant: {
              quality: [0.65, 0.90],
              speed: 4
            },
            gifsicle: {
              interlaced: false,
            },
            webp: {
              quality: 75
            }
          }
        },
      ],
    },
    {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: [
        'file-loader',   // 處理字體
      ],
    },
    {
      test: /\.(sa|sc|c)ss$/,
      use: [
        MiniCssExtractPlugin.loader,   // css 分離
        'css-loader',   // 處理 css
        'sass-loader',  // 處理 sass
      ],
    },
  ],
}

六、總結

npm run build:stage 是一個用於在生產環境測試階段進行項目構建的命令。在使用該命令時，我們需要注意配置環境變數、優化構建和打包過程、合理使用插件以及管理資源文件等方面。通過了解和掌握這些技巧，我們可以更加高效地構建和打包項目代碼，並在測試環境中進行精準的調試和排錯。