cnblogs——从主题开发浅谈前端性能优化

前言

cnblogs-theme是我当前使用的主题，主题基于BNDong开源的进行魔改，但是这为什么会说到性能优化呢？那必然是页面加载存在缓慢的问题呗;

!> 本文的一些优化都是基于主题的情况来进行优化的，实际生产中可能有所不同；在生产中要切记，免费的永远是最贵的！

比如：优化过程中iconfont使用的是iconfont的CDN，但是这个在生产中我建议使用本地或者自身的CDN，这样就算iconfont的挂了也不会有啥影响；

内容

按着我自己的针对主题优化的步骤：

分析打包文件；
优化资源文件；
优化代码；
通过性能分析工具分析；

webpack

?> 用webpack-bundle-analyzer对制品进行分析，通过分析能够轻而易举的知道代码中模块占比，从而进行简化；

webpack-bundle-analyzer 配置使用

1). 删除不需要的包，或者使用更好更简洁的方法去替代；

比如去除主题axios，使用fetch代替，因为本身主题存在的请求没有过多的复杂，fetch足以；

代码语言：javascript复制

export async function request(url = '', method = 'GET', data = {}, headers = {}) {
    let options = {
        method: method,
        mode: 'cors',
        redirect: 'follow',
        referrerPolicy: 'no-referrer',
    }
    if (Object.keys(headers).length) {
        options.headers = headers
    }
    if (Object.keys(data).length) {
        options.body = JSON.stringify(data)
    }
    const response = await fetch(url, options)
    return response.json()
}

2). 抽离第三方npm包，配置国内的CDN资源，通过ajax方式动态的引入资源；

这一步完成后已经大幅的减少了制品的大小；

代码语言：javascript复制

/**
 * 动态加载JS文件
 * @param url {String} JavaScript文件地址
 *
 */
function dynamicLoadingJs(url) {
    return new Promise((resolve, reject) => {
        $.ajax({
            type: 'GET',
            dataType: 'script',
            cache: true,
            url,
            success: function (data) {
                resolve(data)
            },
            error: function (err) {
                reject(err)
            },
        })
    })
}

3). 按需加载，通过import对资源进行按需加载和预加载，webpackPrefetch会在浏览器空闲的时候缓存所需资源，优先级低于webpackPreload；

代码语言：javascript复制

   import(/* webpackChunkName: "code-hljs" */ /* webpackPrefetch: true */ './lib/hljs').then(module => {
                const codeMain = module.default;
                codeMain(setCodeLine);
            });

4). 代码压缩

通过terser-webpack-plugin,css-minimizer-webpack-plugin,``compression-webpack-plugin对主题的js，css代码进行压缩；

gzip压缩在实际的环境中需要和nginx进行配合使用，这里也是因为博客园本身开启了gzip，所以我才在webpack中进行了相应的配置；

代码语言：javascript复制

let webpackProdConfig = {
    mode: 'production',
    entry: './src/main.js',
    output: {
        filename: 'simple-memory.js',
        chunkFilename:'script/[name].[contenthash:8].js',
        path: path.resolve(__dirname, '../dist'),
        clean: true
    },
    devtool: false,
    optimization: {
        minimize: true,
        minimizer: [
            new terserPlugin({
                parallel: true,
                extractComments: false,
            }),
            new cssMinimizerPlugin({
                minimizerOptions: {
                    preset: ["default", {
                        discardComments: { removeAll: true },
                    },
                    ],
                },
                parallel: true,
            }),
            new CompressionPlugin({
                algorithm: 'gzip',
                test: /.js$|.html$|.css$/,
                minRatio: 1,
                threshold: 10240,
                deleteOriginalAssets: false,
            })
        ],
    },
};