cnblogs——从主题开发浅谈前端性能优化
Posted 。思索
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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,然后根据提示再进行一波优化;
以上是关于cnblogs——从主题开发浅谈前端性能优化的主要内容,如果未能解决你的问题,请参考以下文章