建设网站需要哪些,wordpress 5.0版,php 网站管理系统,wordpress 文章摘要一、项目背景
维护过 灵犀官网、企业邮官网、免费邮官网 均使用 jquery webpack多页面打包的方式 开发起来较为繁琐 新的官网项目#xff0c;想使用现代前端框架#xff0c;但SPA应用不利于SEO 使用SSR方案又依赖运维#xff0c;增加维护和沟通成本
二、SSG vs 预渲染
S…一、项目背景
维护过 灵犀官网、企业邮官网、免费邮官网 均使用 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 namedescription提供网页的描述用于 SERP 中显示网页的简短描述。
meta namedescription content网页描述
meta namekeywords:指定网页的关键词用逗号分隔多个关键词
meta namekeywords content关键词1, 关键词2, 关键词3
meta namerobots指定搜索引擎爬虫的行为。
meta namerobots contentindex,follow !-- 爬取并索引该页面的链接和内容 --
meta namerobots contentnoindex,nofollow !-- 不爬取和索引该页面的链接和内容 --
meta nameviewport用于优化移动设备上的显示效果
meta nameviewport contentwidthdevice-width, initial-scale1.0
meta nameauthor指定网页的作者
meta nameauthor content作者名
meta nameog:title在社交媒体上分享时显示的标题。
meta nameog:title content分享标题
meta nameog:description在社交媒体上分享时显示的描述
meta nameog:description content分享描述
meta nameog:image在社交媒体上分享时显示的缩略图。
meta nameog:image content缩略图链接
meta nameapplicable-devicecontentpc,mobile:告诉浏览器页面属于什么类型设备
meta nameapplicable-devicecontentpc企业邮官网是两套代码不设置这个标签有可能会导致在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 CSSWindiCSS的社区和文档资源相对较少可能会对一些开发者造成一定的学习和使用难度。 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?_ta8780 开源工具 ffmpeg号称多媒体的瑞士军刀可以很完美的处理视频、音频、图片 ffmpeg -i input.jpg -vf scale640:-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-pluginnext -D
yarn add mini-css-extract-plugin1.6.0 -Dwebpack配置 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 relpreload hrefstyle.css asstyle onloadthis.onloadnull;this.relstylesheetlink href73131f5.css relstylesheet mediaxxx onloadthis.mediaall /
静态资源CDN 考虑访问网站的国外用户较多需要将打包后的jscss资源放在http://storage.cowork.netease.com/upload.html
/*将静态资源cssjs上传至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()
