遊戲陪玩原始碼前端效能優化，開發階段可採取的措施

雲豹科技程式設計師發表於2021-12-27
遊戲原始碼前端優化

webpack效能優化

遊戲陪玩原始碼在開發階段的前端效能優化，其實就是對 webpack的效能的優化，主要可以從打包時間和打包體積2個方面著手。
1. 升級webpack
首先要做的是升級webpack到最新版本，webpack5目前已經內建很多外掛，並且進行了許多優化，升級其實是一個不錯的選擇。
2. 縮減搜尋範圍 / 減少檔案處理
我們知道webpack會結合loader會去掃描各種檔案，然後找到對應的loader進行轉換。但是我們知道node_modules的檔案是轉譯過後的，我們沒必要再去掃描一邊，以及一些引入到專案的第三方庫。這些我們可以當作他們是以及成熟的檔案不需要進行loader處理。
  1. include/exclude通常在各大Loader裡配置，src目錄通常作為原始碼目錄，可做如下處理。當然include/exclude可根據實際情況修改。
export default {
    // ...
    module: {
        rules: [{
            exclude: /node_modules/,
            include: /src/,
            test: /\.js$/,
            use: "babel-loader"
        }]
    }
};
2.使用externals提取公共不會改變的庫。在html裡面引入對應的cdn即可。
<script
  src="
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous"
></script>

module.exports = {
  //...
  externals: {
    jquery: 'jQuery',
  },
};
enxternals這裡會有2個功能：
  • 防止將某些 import 的包(package)打包到bundle中，而是在遊戲陪玩原始碼執行時(runtime)再去從外部獲取這些擴充套件依賴(external dependencies)。
  • 暴露全域性的jQuery變數名。有些遊戲陪玩原始碼裡面可能會使用jQuery這樣的變數名去取方法。掛在在全域性則不會報錯了。
3.使用DllPlugin將第三方包提前打包好。使用方法可以參考# webpack使用-詳解DllPlugin。
DllPlugin大概意思就是，把遊戲陪玩原始碼找那中不經常變換的庫打包到一個檔案中，並生成一個react.manifest.json檔案。存著第三方庫的name和打包後檔案的對應位置關係，下次打包就不需要再經過讀取，編譯，轉換等一系列耗時操作了。
3. 定向搜尋
配置resolve提高遊戲陪玩原始碼中檔案的搜尋速度alias對映模組路徑，extensions表明檔案字尾，noParse過濾無依賴檔案。通常配置alias和extensions就足夠。
export default {
    // ...
    resolve: {
        alias: {
            "#": AbsPath(""), // 根目錄快捷方式
            "@": AbsPath("src"), // src目錄快捷方式
            swiper: "swiper/js/swiper.min.js"
        }, // 模組匯入快捷方式
        extensions: [".js", ".ts", ".jsx", ".tsx", ".json", ".vue"] // import路徑時檔案可省略字尾名
    }
};
4. 快取
配置cache快取loader，好處是編譯是隻編譯修改過的檔案。大部分loader都提供了cache的選項，以babel-loader和eslint-webpack-plugin為例。
import EslintPlugin from "eslint-webpack-plugin";
export default {
    // ...
    module: {
        rules: [{
            // ...
            test: /\.js$/,
            use: [{
                loader: "babel-loader",
                options: { cacheDirectory: true }
            }]
        }]
    },
    plugins: [
        new EslintPlugin({ cache: true })
    ]
};
5. 多執行緒
遊戲陪玩原始碼使用多執行緒的好處就是利用多核cpu併發處理檔案的優勢。我們知道js/node是單執行緒的，我們如何利用多核cpu來處理大量檔案呢？
import EslintPlugin from "eslint-webpack-plugin";
export default {
    // ...
    module: {
        rules: [{
            // ...
            test: /\.js$/,
            use: [{
                loader: "babel-loader",
                options: { cacheDirectory: true }
            }]
        }]
    },
    plugins: [
        new EslintPlugin({ cache: true })
    ]
};
6. 減少程式碼量 / 壓縮
在準備遊戲陪玩原始碼上線的時候我們希望程式碼儘量少一些。我們可以剔除掉沒有使用到的多餘的程式碼。並且可以提取公共部分，這樣相同程式碼不用重複打包在不同檔案中增加程式碼體積。
export default {
    // ...
    mode: "production"
};
在webpack裡只需將打包環境設定成生產環境就能讓搖樹優化生效，同時業務程式碼使用ESM規範編寫，使用import匯入模組，使用export匯出模組。 壓縮HTML/CSS/JS程式碼，壓縮字型/影像/音訊/視訊好處是更有效減少打包體積
  • optimize-css-assets-webpack-plugin：壓縮CSS程式碼
  • uglifyjs-webpack-plugin：壓縮ES5版本的JS程式碼
  • terser-webpack-plugin：壓縮ES6版本的JS程式碼
webpack v4使用splitChunks替代CommonsChunksPlugin實現程式碼分割。具體參考官網
export default {
    // ...
    optimization: {
        runtimeChunk: { name: "manifest" }, // 抽離WebpackRuntime函式
        splitChunks: {
            cacheGroups: {
                common: {
                    minChunks: 2,
                    name: "common",
                    priority: 5,
                    reuseExistingChunk: true, // 重用已存在程式碼塊
                    test: AbsPath("src")
                },
                vendor: {
                    chunks: "initial", // 程式碼分割型別
                    name: "vendor", // 程式碼塊名稱
                    priority: 10, // 優先順序
                    test: /node_modules/ // 校驗檔案正規表示式
                }
            }, // 快取組
            chunks: "all" // 程式碼分割型別：all全部模組，async非同步模組，initial入口模組
        } // 程式碼塊分割
    }
};
7. 按需載入
將遊戲陪玩原始碼路由頁面/觸發性功能單獨打包為一個檔案，使用時才載入，好處是減輕首屏渲染的負擔。因為專案功能越多其打包體積越大，導致首屏渲染速度越慢。
const Login = () => import( /* webpackChunkName: "login" */ "../../views/login");
const Logon = () => import( /* webpackChunkName: "logon" */ "../../views/logon");
// ----bable.config.js
{
    // ...
    "babel": {
        // ...
        "plugins": [
            // ...
            "@babel/plugin-syntax-dynamic-import"
        ]
    }
}
以上就是“遊戲陪玩原始碼前端效能優化，開發階段可採取的措施”的全部內容，希望對大家有幫助。 本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理 原文連結：


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69996194/viewspace-2849560/，如需轉載，請註明出處，否則將追究法律責任。

相關文章