游戏陪玩源码前端性能优化，开发阶段可采取的措施

webpack性能优化

游戏陪玩源码在开发阶段的前端性能优化，其实就是对 webpack的性能的优化，主要可以从打包时间和打包体积2个方面着手。

1. 升级webpack

首先要做的是升级webpack到最新版本，webpack5目前已经内置很多插件，并且进行了许多优化，升级其实是一个不错的选择。

2. 缩减搜索范围 / 减少文件处理

我们知道webpack会结合loader会去扫描各种文件，然后找到对应的loader进行转换。但是我们知道node_modules的文件是转译过后的，我们没必要再去扫描一边，以及一些引入到项目的第三方库。这些我们可以当作他们是以及成熟的文件不需要进行loader处理。

export default {
    // ...
    module: {
        rules: [{
            exclude: /node_modules/,
            include: /src/,
            test: /\.js$/,
            use: "babel-loader"
        }]
    }
};

2.使用externals提取公共不会改变的库。在html里面引入对应的cdn即可。

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  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来处理大量文件呢？

let HappyPack = require('happypack');

module.exports = {
    ...
    module:{
        rules:[
            {
                test:/\.js$/,
                use:'HappyPack/loader?id=js'//这个id=js就代表这是打包js的
            },
            {
                test:/\.css$/,
                use:'HappyPack/loader?id=css'//这个id=css就代表这是打包css的
            }
        ]
    },
    plugins:[
        new HappyPack({这个id:js就代表这是打包js的
            id:'css',//
            use:['style-loader','css-loader']
        }),
        new HappyPack({这个id:js就代表这是打包js的
            id:'js',//
            use:[{//use是一个数组，这里写原先在rules的use里的loader配置
                loader:'babel-loader',
                options:{
                    presets:[
                        '@babel/presets-env',
                        '@babel/presets-react'
                    ]
                }
            }]
        })
    ]
}

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"
        ]
    }
}

以上就是“游戏陪玩源码前端性能优化，开发阶段可采取的措施”的全部内容，希望对大家有帮助。