一、项目背景
维护过 灵犀官网、企业邮官网、免费邮官网 均使用 jquery + webpack多页面打包的方式
开发起来较为繁琐
新的官网项目,想使用现代前端框架,但SPA应用不利于SEO
使用SSR方案又依赖运维,增加维护和沟通成本
二、SSG vs 预渲染
SSG(静态站点生成):
特点:SSG 是一种构建时生成静态 HTML 页面的技术。在构建过程中,服务器会根据应用的路由和数据,生成一系列静态 HTML 文件,这些文件可以直接提供给用户,不需要实时的服务器请求。每次页面访问时,都会返回预先生成的静态页面。
优点:SSG 可以提供非常快速的页面加载速度,因为它们是预先生成的静态文件,不需要服务器动态生成页面内容。另外,SSG 也有利于搜索引擎优化(SEO),因为搜索引擎可以直接访问静态 HTML 页面。
适用场景:适用于内容相对固定、不经常更新的网站,如博客、公司官网等。Jekyll、hexo、Gatsby、vite-ssg
预渲染:
特点:预渲染是在构建时生成静态 HTML 页面的过程,但它只会为特定的页面进行预渲染,而不是整个网站。在构建过程中,预渲染工具会解析应用的特定页面,并生成相应的静态 HTML 文件,这些文件会在用户访问时直接返回。
优点:预渲染可以针对特定页面进行优化,可以选择性地预渲染那些对性能和用户体验影响较大的页面。它可以在构建时处理异步数据获取,确保页面在用户访问时已经包含了相关数据,提供更快的初始加载速度。
适用场景:适用于有部分页面需要实时数据的网站,如商品详情页、新闻文章等。
三、SEO标签
<title>:指定网页的标题,是搜索引擎结果页面(SERP)中显示的主要标题。
<meta name="description">:提供网页的描述,用于 SERP 中显示网页的简短描述。
<meta name="description" content="网页描述">
<meta name="keywords">:指定网页的关键词,用逗号分隔多个关键词
<meta name="keywords" content="关键词1, 关键词2, 关键词3">
<meta name="robots">:指定搜索引擎爬虫的行为。
<meta name="robots" content="index,follow"> <!-- 爬取并索引该页面的链接和内容 -->
<meta name="robots" content="noindex,nofollow"> <!-- 不爬取和索引该页面的链接和内容 -->
<meta name="viewport">:用于优化移动设备上的显示效果
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author">:指定网页的作者
<meta name="author" content="作者名">
<meta name="og:title">:在社交媒体上分享时显示的标题。
<meta name="og:title" content="分享标题">
<meta name="og:description">:在社交媒体上分享时显示的描述
<meta name="og:description" content="分享描述">
<meta name="og:image">:在社交媒体上分享时显示的缩略图。
<meta name="og:image" content="缩略图链接">
<meta name="applicable-device"content="pc,mobile">:告诉浏览器页面属于什么类型设备
<meta name="applicable-device"content="pc">
企业邮官网是两套代码,不设置这个标签有可能会导致在pc搜索时,移动端网站排名靠前
react 使用插件react-helmet
vue 使用插件 vue-meta vue-head
四、最终方案
react + craco + prerender-spa-plugin + tailwindcss
五、脚手架
使用create-react-app 创建的项目默认是无法修改其内部的webpack配置的,不像vue-cli那样可以通过一个配置文件修改。虽然有一个eject 命令可以是将配置完全暴露出来,但这是一个不可逆的操作,同时也会失去CRA带来的便利和后续升级。
如果想要无 eject 重写 CRA 配置,目前成熟的是下面这几种方式
通过 CRA 官方支持的 --scripts-version 参数,创建项目时使用自己重写过的 react-scripts 包
使用 react-app-rewired + customize-cra 组合覆盖配置
使用 craco 覆盖配置
六、预渲染
prerender-spa-plugin webpack 插件
prerender-spa-plugin 是一个通用的预渲染插件,适用于各种前端框架,包括 React。
它使用 Puppeteer(一个无头浏览器)在构建过程中模拟浏览器环境,并将预渲染的 HTML 文件保存到指定目录。
prerender-spa-plugin 需要在 webpack 的配置文件中进行配置,并与其他 webpack 插件和加载器一起使用。
它支持路由配置,可以指定哪些路由需要预渲染。
prerender-spa-plugin 提供了更多的灵活性和定制选项,可以通过配置文件来设置渲染的行为和页面参数
React Snap命令行工具
React Snap 是专门为 React 应用设计的预渲染工具。
它通过在构建过程中运行 React 应用,并在客户端和服务器端渲染之间进行切换,将 React 组件转换为静态 HTML 文件。
React Snap 的配置相对简单,只需添加一个配置文件并运行构建命令即可。
它支持路由配置,你可以指定哪些路由需要预渲染。
React Snap 还提供了一些其他的配置选项,如添加 HTTP 头、设置超时时间等。
React Snap 更适合与 React 应用紧密集成,并且配置简单,适用于快速实现预渲染。prerender-spa-plugin 则更通用,适用于各种前端框架,并且具有更多的配置选项和定制能力。
打包遇到的问题
webpack5插件兼容问题 报错:
报错:Unable to prerender all routes
可以使用修改后的库
yarn add @dreysolano/prerender-spa-plugin
const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin')
服务器环境
报错:Can't Use Puppeteer -- Error: Failed to launch chrome
linux打包需要安装
https://stackoverflow.com/questions/59112956/cant-use-puppeteer-error-failed-to-launch-chrome
七、原子化css
大部分情况写css应该都是写一个类,然后整一堆样式进去。这种方式写多了以后,会感受到一些痛点,比如说:
取名困难
样式污染
复用难
原子化 CSS 是一种 CSS 的架构方式,它倾向于小巧且用途单一的 class,并且会以视觉效果进行命名
Tailwind CSS:
特点:Tailwind CSS是一个功能强大的工具包,提供了一系列的可复用的原子类,用于构建用户界面。它具有广泛的样式和布局类,可快速搭建页面,并支持自定义配置。
优点:Tailwind CSS具有非常灵活的设计,允许开发者根据需要选择和组合类来创建自定义样式。它的配置文件可以轻松地进行自定义和扩展,而且有大量的文档和社区支持。
缺点:Tailwind CSS生成的样式表文件相对较大,因为它提供了大量的类选择器。对于一些项目而言,文件大小可能会成为一个问题。
WindiCSS:
特点:WindiCSS是一个面向现代框架的类似Tailwind CSS的工具,它具有更好的性能和开发体验。它通过使用 Just-In-Time (JIT) 编译方式,仅生成所需的样式,从而减小了生成的样式表文件的大小。
优点:WindiCSS相比于Tailwind CSS在性能方面有所提升,同时保持了类似的开发体验和灵活性。它的配置文件也支持自定义和扩展。
缺点:相对于Tailwind CSS,WindiCSS的社区和文档资源相对较少,可能会对一些开发者造成一定的学习和使用难度。
UnoCSS:
特点:UnoCSS是另一个类似于Tailwind CSS的CSS框架,提供了一组可复用的原子类。它专注于可访问性和可定制性,并支持通过自定义配置文件进行样式的调整。
优点:UnoCSS具有良好的可访问性和可定制性,可以根据项目需求进行灵活的样式定制。它还提供了一些附加的功能,如主题切换和自动修复样式规则。
缺点:UnoCSS的用户群体相对较小,相比于Tailwind CSS和WindiCSS的知名度和社区支持较少。
className="h-11 bg-white flex justify-between items-center px-6 shadow"
并且写响应式比较方便
className="md:text-xl md:mt-4"
维护老项目可以使用
https://github.com/changgeee/bit-css
八:项目优化
图片压缩
在线网站:https://kt.fkw.com/yasuo.html?_ta=8780
开源工具:
ffmpeg号称多媒体的瑞士军刀,可以很完美的处理视频、音频、图片
ffmpeg -i input.jpg -vf scale=640:-1 output.jpg
python库: Pillow
使用图片懒加载
react-lazyload
和react-lazy-load-image-component
是两个常用的 React 图片懒加载插件
react-lazyload:
react-lazyload 是一个轻量级的图片懒加载库,可以延迟加载图片,当图片进入可视区域时再进行加载。
它提供了 组件,你可以将需要懒加载的图片包裹在其中。
react-lazyload 提供了一些配置选项,如占位符、阈值等,可以根据需要进行自定义。
这个库相对较小,易于使用,适用于简单的图片懒加载需求。
react-lazy-load-image-component:
react-lazy-load-image-component 是一个功能丰富的图片懒加载库,提供了更多的功能和定制选项。
它提供了 组件,可以代替 元素进行图片懒加载。
react-lazy-load-image-component 支持设置占位符、加载效果、错误处理、渐进式加载等。
这个库的体积相对较大,但提供了更多的灵活性和可定制性,适用于复杂的图片懒加载需求。
css打包优化
mini-css-extract-plugin:将 CSS 代码从 JavaScript 中分离出来,生成单独的 CSS 文件
purgecss-webpack-plugin:清除多余css,必须结合上面的插件使用
前后对比
原因是tailwindcss有太多未使用的样式,这里使用 prugecss 去除
yarn add purgecss-webpack-plugin@next -D
yarn add mini-css-extract-plugin@1.6.0 -D
webpack配置
new MiniCssExtractPlugin({
filename: "[name].css",
}),
new PurgecssPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
}),
查看&&优化 js包体积
webpack4+无需手动添加 UglifyJsPlugin
craco webpackConfig.optimization.minimize 默认设置为true
使用webpack-bundle-analyzer
进行分析
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
new BundleAnalyzerPlugin({
analyzerMode: 'server',
analyzerHost: '127.0.0.1',
analyzerPort: 8888,
openAnalyzer: true, // 构建完打开浏览器
reportFilename: path.resolve(__dirname, `analyzer/index.html`),
}),
代码拆分的情况
使用splitChunks拆分代码
plugins:[],
configure: (webpackConfig, { env: webpackEnv, paths }) => {
webpackConfig.optimization.splitChunks = {
...webpackConfig.optimization.splitChunks,
cacheGroups: {
base: {
// 基本框架
chunks: 'all',
test: /(react|react-dom|react-dom-router|axios)/,
name: 'base',
priority: 100,
},
moment: {
test: /[\\/]node_modules[\\/]moment[\\/]/,
name: 'moment',
priority: 90,
},
commons: {
chunks: 'all',
// 将两个以上的chunk所共享的模块打包至commons组。
minChunks: 2,
name: 'commons',
priority: 80,
},
},
};
return webpackConfig;
}
使用babel-plugin-import按需引入
babel: {
plugins: [
// 配置 babel-plugin-import ant按需加载
[
'import',
{
libraryName: 'antd',
libraryDirectory: 'es',
style: 'true',
},
'antd',
],
[
'import',
{
libraryName: 'moment',
libraryDirectory: 'es',
style: 'true',
},
'moment',
],
],
css异步加载
css文件的加载是会block网站渲染的 因此我们可以把非关键(非首屏)css异步加载
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link href="73131f5.css" rel="stylesheet" media="xxx" onload="this.media='all'" />
静态资源CDN
考虑访问网站的国外用户较多,需要将打包后的js,css资源放在http://storage.cowork.netease.com/upload.html
/*
将静态资源css,js上传至cdn并替换
*/
const fs = require('fs');
const rp = require('request-promise');
const glob = require('glob');
//上传文件并获取url
async function uploadFile(filePath) {
var options = {
method: 'POST',
// url: 'http://10.242.0.216:8080/api/pub/intranet/upload',
// url: 'http://storage.cowork.netease.com/api/pub/intranet/upload',
url: 'http://storage.cowork.netease.com/api/pub/file/upload',
formData: {
bizCode: 'common-40b61c',
contentType: 'text/css',
needHttps: 'true',
file: fs.createReadStream(filePath),
},
};
// console.log(rp(options))
return await rp(options).then(res => JSON.parse(res).data);
}
//读取文件,并且替换文件中指定的字符串
function replaceFile(filePath, sourceRegx, targetStr) {
fs.readFile(filePath, function(err, data) {
if (err) {
return err;
}
let str = data.toString();
str = str.replace(sourceRegx, targetStr);
fs.writeFile(filePath, str, function(err) {
if (err) {
console.log(err);
return err;
}
});
});
}
//遍历statics文件夹,找到main_*.js
function findFile(dir, filenameReg, cb) {
fs.readdir(dir, function(err, files) {
if (err) {
return err;
}
if (files.length != 0) {
files.forEach(item => {
let path = dir + '/' + item;
//判断文件的状态,用于区分文件名/文件夹
fs.stat(path, function(err, status) {
if (err) {
return err;
}
let isFile = status.isFile(); //是文件
let isDir = status.isDirectory(); //是文件夹
if (isFile) {
if (item.match(new RegExp(filenameReg))) {
// console.log('找到了', path);
// arr.push(path);
cb(path);
}
}
if (isDir) {
findFile(path, filenameReg, cb);
}
});
});
}
});
}
function test() {
findFile('./build', '^main.*css$', function(css) {
uploadFile(css).then(url => {
console.log('----', url);
});
});
}
// 替换静态资源
function replaceCss(htmls, dynamicValue) {
findFile('./build', '^' + dynamicValue + '.*css$', function(path) {
console.log(path);
uploadFile(path).then(url => {
console.log(url);
htmls.forEach(html => {
replaceFile(html, new RegExp('\/static\/css\/' + dynamicValue + '.[a-z0-9]{8}.css'), url);
});
});
});
}
function replaceJs(htmls, dynamicValue) {
findFile('./build', '^' + dynamicValue + '.*js$', function(path) {
console.log(path);
uploadFile(path).then(url => {
// /\/static\/js\/main.[a-z0-9]{8}.js/
htmls.forEach(html => {
replaceFile(html, new RegExp('\/static\/js\/' + dynamicValue + '.[a-z0-9]{8}.js'), url);
});
});
});
}
let htmls = [];
glob.sync('./build/**/index.html').forEach(html => {
htmls.push(html);
});
replaceCss(htmls, 'main');
replaceJs(htmls, 'main');
replaceJs(htmls, 'base');
replaceJs(htmls, 'moment');
replaceJs(htmls, 'lodash');
// test()