轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack生產環境優化：緩存

生產環境的緩存主要分為：babel緩存和文件資源緩存。

一、babel緩存配置

• babel緩存
  • 目標：讓第二次打包構建速度更快。
  • 在babel-loader配置中添加緩存配置：cacheDirectory： true

/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
    在babel-loader配置中添加緩存配置：`cacheDirectory： true`
*/

……

/*
     js兼容性處理:babel-loader @babel/core @babel/preset-env
     1.基本js兼容性處理 @babel/preset-env
     問題：只能轉換基本語法，如promise不能轉換 
     2．全部js兼容性處理 --> @babel/polvfill
     問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了~ 
     3. 需要做兼容性處理的就做：按需加載 --> core-js
     */
{
    test: /\.(?:js|mjs|cjs)$/,
    // 指定檢查的目錄，或者配置排除某些文件夾
    // include: [path.resolve(__dirname, 'src')], 
    // 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
    loader: "babel-loader",
    exclude: /node_modules/,
    options: {
        // 預設：指示 babel 做怎么樣的兼容性處理
        "presets": [
            [
                "@babel/preset-env",
                {
                    // 按需加載
                    useBuiltIns: 'usage',
                    // 制定 core-js 版本
                    corejs: {
                        version: 3
                    },
                    //指定兼容性做到哪個版本的瀏覽器
                    targets: {
                        chrome: '60',
                        firefox: '60',
                        ie: '9',
                        safari: '10',
                        edge: '17'
                    }
                }
            ]
        ],
        // 開啟babel緩存
        //第二次構建時，會讀取之前的緩存
        cacheDirectory: true
    }
},

……

核心配置

// 開啟babel緩存
//第二次構建時，會讀取之前的緩存
cacheDirectory: true

二、文件資源緩存

• 文件資源緩存
  • 目標： 讓代碼上線運行緩存更好使用
  • 在生成的js和css文件名上添加hash值，生成的hash值有以下幾種：
    • hash：每次wepack構建時會生成一個唯一的hash值。
      • 問題：因為js和css同時使用一個hash值。如果重新打包，會導致所有緩存失效。（可能我卻只改動一個文件）
    • chunkhash：根據chunk生成的hash值。
      • 問題：js和css的hash值還是一樣的。
      • 原因：如果打包來源于同一個chunk，那么hash值就一樣。而css是在js中被引入的，所以同屬于一個chunk。
    • contenthash：根據文件的內容生成hash值。不同文件hash值一定不一樣。

/*
    webpack.config.js webpack的配置文件
    路徑： ./webpack.config.js
*/

    ……
    
module.exports = {
    // webpack配置
    // 入口起點文件
    entry: './src/js/index.js',
    // 輸出
    output: {
        // 輸出文件名
        filename: 'js/built.[contenthash:10].js',
        // 輸出路徑
        // __dirname nodejs的變量,代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build'),
    },
    // loader的配置
    module: {
        rules: [

            // 詳細loader配置
            //不同文件必須配置不同loader處理
            ……
        ],
    },
    // plugins的配置
    plugins: [
        // 詳細的plugins配置
        ……
        new MiniCssExtractPlugin({
            //對輸出的css文件進行重命名，這里單獨為生成的 css 創建一個 css 文件夾。
            filename: './css/[contenthash:10].css',
            ignoreOrder: false,
            linkType: "text/css",
        }),
        ……
    ],
    // 模式  development  開發環境，production 生產環境
    // mode: 'development',
    // 生產環境下會自動壓縮js代碼
    mode: 'production',

    // 開發服務器devServer:用來自動化(自動編譯, 自動打開瀏覽器, 自動刷新瀏覽器)
    // 特點:只會在內存中編譯打包,不會有任何輸出
    // 啟動devServer指令為: npx webpack-dev-server
    devServer: {
        ……
    },
};

核心配置

   ……
   // 在 output配置文件輸出是添加.[contenthash:10]配置，
   // 實現在生成的文件名中加入 10位hash哈西值。
   // 如果文件內容沒有變化，那么 contenthash 不會變化。
   
    output: {
        // 輸出文件名
        filename: 'js/built.[contenthash:10].js',
        // 輸出路徑
        // __dirname nodejs的變量,代表當前文件的目錄絕對路徑
        path: resolve(__dirname, 'build'),
    },
    
    ……

        ……
 
// 在 plugins中的MiniCssExtractPlugin插件的filename配置中添加[contenthash:10]配置，
// 實現在生成的文件名中加入 10位hash哈西值。
// 如果文件內容沒有變化，那么 contenthash 不會變化。
   
   
    // plugins的配置
    plugins: [
        // 詳細的plugins配置
        ……
        new MiniCssExtractPlugin({
            //對輸出的css文件進行重命名，這里單獨為生成的 css 創建一個 css 文件夾。
            filename: './css/[contenthash:10].css',
            ignoreOrder: false,
            linkType: "text/css",
        }),
        
        ……
        
    ],
    
     ……
      

三、緩存測試

3.1、搭建測試服務器

使用express搭建測試服務器

// server.js 文件
// 服務器代碼
// express搭建服務器
const express = require('express');
// app 中間件 use 暴露服務器
// maxAge: 1000 * 3600 有效期 1 小時
const app = express();
app.use(express.static('build', { maxAge: 1000 * 3600 }));
// 啟動監聽端口
app.listen(3000);

• 啟動服務器指令:
  • 方式一：使用nodemon啟動，需要安裝nodemon包
    • npm i nodemon -g
    • nodemon server.js
  • 方式二：使用 node ,無需額外安裝包
    • node server.js
• 訪問服務器地址：http://localhost:3000/

3.2、執行測試服務器

# 先打包構建
> npx webpack
# 再啟動服務器
> node server.js

服務器啟動后，如果要測試代碼改動，可以再啟動一個終端直接重新打包構建，無需重啟服務器，直接刷新瀏覽器即可。

3.3、查看緩存配置是否生效

瀏覽器訪問：http://localhost:3000/

打開調試工具查看

打開調試工具查看Cache-Control信息

四、工程文件路徑

.
├── build       ## 打包后的js和css文件名稱后面都加上了10位hash值。
│   ├── css
│   │   ├── 1.8f2f5b58a1.css
│   │   └── 2.c6c6c3a2a2.css
│   ├── imgs
│   │   └── ae7bf15c0d.jpg
│   ├── index.html
│   ├── js
│   │   ├── 1.built.c15a5dbe89.js
│   │   ├── 1.built.c15a5dbe89.js.map
│   │   ├── 2.built.1605e46a5d.js
│   │   ├── 2.built.1605e46a5d.js.map
│   │   ├── built.f675d9b9a1.js
│   │   └── built.f675d9b9a1.js.map
│   └── media
│       └── cffec944b5. ttf
├── server.js                   ## 服務器文件
├── src
│   ├── css
│   │   ├── iconfont.css
│   │   ├── index.css
│   │   └── index.less
│   ├── imgs
│   │   ├── img.jpg
│   │   ├── img1.jpg
│   │   ├── img2.jpg
│   │   └── img3.jpg
│   ├── index.html
│   ├── js
│   │   ├── iconfont.js
│   │   └── index.js
│   └── media
│       ├── iconfont.json
│       └── iconfont.ttf
└── webpack.config.js