cnblogs——从主题开发浅谈前端性能优化
前言
cnblogs-theme是我当前使用的主题，主题基于BNDong开源的进行魔改，但是这为什么会说到性能优化呢？那必然是页面加载存在缓慢的问题呗;
!> 本文的一些优化都是基于主题的情况来进行优化的，实际生产中可能有所不同；在生产中要切记，免费的永远是最贵的！
比如：优化过程中iconfont使用的是iconfont的CDN，但是这个在生产中我建议使用本地或者自身的CDN，这样就算iconfont的挂了也不会有啥影响；
内容
按着我自己的针对主题优化的步骤：
- 分析打包文件；
- 优化资源文件；
- 优化代码；
- 通过性能分析工具分析；
webpack
?> 用webpack-bundle-analyzer对制品进行分析，通过分析能够轻而易举的知道代码中模块占比，从而进行简化；
webpack-bundle-analyzer 配置使用
1). 删除不需要的包，或者使用更好更简洁的方法去替代；
比如去除主题
axios，使用fetch代替，因为本身主题存在的请求没有过多的复杂，fetch足以；
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方式动态的引入资源；
这一步完成后已经大幅的减少了制品的大小；
/**
* 动态加载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；
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中进行了相应的配置；
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,
})
],
},
};
资源文件
全部使用本地的资源文件的话，通过
jsdelivr去进行加载会十分缓慢，所以这里会将一些资源文件替换为对应的可访问的CDN资源；
1). 字体文件
使用官方CDN代替本地google fonts字体文件；
2). 字体图标
使用iconfont的CDN代替本地资源；
3). 图片文件
对所有的图片文件进行了webp压缩，并上传到博客园相册，利用博客园本身的CDN；
4). js文件
这里的js文件，主要针对的是npm包第三方的js文件； 因为有些资源在国内的CDN平台是没有，所以这时候就要上传到博客园的文件里再引用了；
代码优化
可以再初步的优化之后，再使用代码扫描工具进行扫描完善；
1). 对代码进行清理，删除无用代码；
2). 对代码进行优化，模块化，组件化；
3). 善于利用ES一些新特性来优化当前代码；
性能分析
通过Lighthouse或者一些在线的都可以，我一般直接用lighthouse，然后根据提示再进行一波优化；
