diff --git a/README.md b/README.md index f001673..0d48610 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ -# electrode-react-ssr-profiler +# electrode-react-ssr-caching -Support React Server Side Rendering profiling to inspect the time each component took to render and provide component caching to help you speed up SSR. +Support profiling React Server Side Rendering time and component caching to help you speed up SSR. # Installing ``` -npm i electrode-react-ssr-profiler +npm i electrode-react-ssr-caching ``` # Usage @@ -15,7 +15,7 @@ npm i electrode-react-ssr-profiler You can use this module to inspect the time each component took to render. ```js -import SSRProfiler from "electrode-react-ssr-profiler"; +import SSRCaching from "electrode-react-ssr-caching"; import { renderToString } from "react-dom/server"; import MyComponent from "mycomponent"; @@ -24,11 +24,11 @@ for( let i = 0; i < 10; i ++ ) { renderToString(); } -SSRProfiler.clearProfileData(); -SSRProfiler.enableProfiling(); +SSRCaching.clearProfileData(); +SSRCaching.enableProfiling(); const html = renderToString(); -SSRProfiler.enableProfiling(false); -console.log(JSON.stringify(SSRProfiler.profileData, null, 2)); +SSRCaching.enableProfiling(false); +console.log(JSON.stringify(SSRCaching.profileData, null, 2)); ``` ## Caching @@ -38,10 +38,10 @@ Once you determined the most expensive components with profiling, you can enable The basic steps to enabling caching are: ```js -import SSRProfiler from "electrode-react-ssr-profiler"; +import SSRCaching from "electrode-react-ssr-caching"; -SSRProfiler.enableCaching(); -SSRProfiler.setCachingConfig(cacheConfig); +SSRCaching.enableCaching(); +SSRCaching.setCachingConfig(cacheConfig); ``` Where `cacheConfig` contains information on what component to apply caching. See below for details. @@ -72,7 +72,7 @@ const cacheConfig = { } } -SSRProfiler.setCachingConfig(cacheConfig); +SSRCaching.setCachingConfig(cacheConfig); ``` ### Caching Strategies diff --git a/docs/art-of-optimizing-ssr.md b/docs/art-of-optimizing-ssr.md index ca94506..31525b8 100644 --- a/docs/art-of-optimizing-ssr.md +++ b/docs/art-of-optimizing-ssr.md @@ -51,7 +51,7 @@ After you've written profiling code to manually render your component with stati The first thing you want to do now is run profiling for a single rendering pass to find how long each individual component take. -Here is an example to use electrode-react-ssr-profiler to profile a component using Redux: +Here is an example to use electrode-react-ssr-caching to profile a component using Redux: ```js const data = { @@ -73,11 +73,11 @@ for( let i = 0; i < 10; i ++ ) { // Now profile and save the data for a single rendering pass promise.then( () => { - SSRProfiler.enableProfiling(); - SSRProfiler.clearProfileData(); + SSRCaching.enableProfiling(); + SSRCaching.clearProfileData(); return renderComponent() .then( () => { - console.log( SSRProfiler.data, null, 2 ); + console.log( SSRCaching.data, null, 2 ); }); }); ``` diff --git a/lib/ssr-profiler.js b/lib/ssr-caching.js similarity index 100% rename from lib/ssr-profiler.js rename to lib/ssr-caching.js diff --git a/package.json b/package.json index 212cb78..b4f22e4 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { - "name": "electrode-react-ssr-profiler", + "name": "electrode-react-ssr-caching", "version": "0.1.3", "description": "Optimize React SSR with profiling and component caching", - "main": "lib/ssr-profiler.js", + "main": "lib/ssr-caching.js", "scripts": { "test": "npm run build-test && gulp check", "build-test": "rm -f test/gen-lib/* && babel test/src -d test/gen-lib", @@ -10,7 +10,7 @@ }, "repository": { "type": "git", - "url": "git@github.com:electrode-io/electrode-react-ssr-profiler.git" + "url": "git@github.com:electrode-io/electrode-react-ssr-caching.git" }, "keywords": [], "author": "Joel Chen ", diff --git a/test/spec/caching.simple.spec.js b/test/spec/caching.simple.spec.js index 1bfc013..b4d69e6 100644 --- a/test/spec/caching.simple.spec.js +++ b/test/spec/caching.simple.spec.js @@ -2,18 +2,18 @@ // test simple caching feature -const SSRProfiler = require("../.."); +const SSRCaching = require("../.."); const renderGreeting = require("../gen-lib/render-greeting").default; const chai = require("chai"); const expect = chai.expect; process.env.NODE_ENV = "production"; -describe("SSRProfiler simple caching", function () { +describe("SSRCaching simple caching", function () { afterEach(() => { - SSRProfiler.setCachingConfig({}); - SSRProfiler.clearCache(); - SSRProfiler.clearProfileData(); + SSRCaching.setCachingConfig({}); + SSRCaching.clearCache(); + SSRCaching.clearProfileData(); }); const verifyRenderResults = (r1, r2, r3) => { @@ -32,8 +32,8 @@ describe("SSRProfiler simple caching", function () { const r1 = renderGreeting("test", message); const r1Time = Date.now() - start; - SSRProfiler.enableCaching(); - SSRProfiler.setCachingConfig({ + SSRCaching.enableCaching(); + SSRCaching.setCachingConfig({ components: { "Hello": { strategy: "simple", @@ -45,17 +45,17 @@ describe("SSRProfiler simple caching", function () { // should add an entry to cache with key-simple - SSRProfiler.shouldHashKeys(false); + SSRCaching.shouldHashKeys(false); renderGreeting("test", message); - expect(SSRProfiler.cacheStore.getEntry("Hello", "key-simple").hits).to.equal(1); + expect(SSRCaching.cacheStore.getEntry("Hello", "key-simple").hits).to.equal(1); // should add an entry to cache with hashed key from key-simple - SSRProfiler.shouldHashKeys(true); + SSRCaching.shouldHashKeys(true); start = Date.now(); const r2 = renderGreeting("test", message); const r2Time = Date.now() - start; - const entry = SSRProfiler.cacheStore.getEntry("Hello", "1357465574333202611"); + const entry = SSRCaching.cacheStore.getEntry("Hello", "1357465574333202611"); expect(entry.hits).to.equal(1); // now render should use result from cache @@ -78,17 +78,17 @@ describe("SSRProfiler simple caching", function () { it("should cache component with simple strategy and stringify", function () { const message = "good morning"; - SSRProfiler.enableProfiling(true); + SSRCaching.enableProfiling(true); const r1 = renderGreeting("test", message); - const data = SSRProfiler.profileData; + const data = SSRCaching.profileData; expect(data.Greeting[0].Hello[0].time).to.be.above(0); - SSRProfiler.enableProfiling(false); - SSRProfiler.clearProfileData(); + SSRCaching.enableProfiling(false); + SSRCaching.clearProfileData(); expect(data).to.deep.equal({}); - SSRProfiler.enableCaching(); - SSRProfiler.setCachingConfig({ + SSRCaching.enableCaching(); + SSRCaching.setCachingConfig({ components: { "Hello": { strategy: "simple", @@ -99,20 +99,20 @@ describe("SSRProfiler simple caching", function () { // should add an entry to cache with stringified props as cache key - SSRProfiler.shouldHashKeys(false); + SSRCaching.shouldHashKeys(false); renderGreeting("test", message); - expect(SSRProfiler.cacheStore.getEntry("Hello", JSON.stringify({name: "test", message})).hits).to.equal(1); + expect(SSRCaching.cacheStore.getEntry("Hello", JSON.stringify({name: "test", message})).hits).to.equal(1); // should add an entry to cache with hashed value of key - SSRProfiler.shouldHashKeys(true); + SSRCaching.shouldHashKeys(true); const r2 = renderGreeting("test", message); - const entry = SSRProfiler.cacheStore.getEntry("Hello", "2422985312975527455"); + const entry = SSRCaching.cacheStore.getEntry("Hello", "2422985312975527455"); expect(entry.hits).to.equal(1); // now render should use result from cache - SSRProfiler.enableProfiling(true); + SSRCaching.enableProfiling(true); const r3 = renderGreeting("test", message); expect(data.Greeting[0].Hello[0].time).to.be.above(0); expect(entry.hits).to.equal(2); diff --git a/test/spec/caching.template.spec.js b/test/spec/caching.template.spec.js index d3fda9a..c73314c 100644 --- a/test/spec/caching.template.spec.js +++ b/test/spec/caching.template.spec.js @@ -2,7 +2,7 @@ // test template caching feature -const SSRProfiler = require("../.."); +const SSRCaching = require("../.."); const renderGreeting = require("../gen-lib/render-greeting").default; const renderBoard = require("../gen-lib/render-board").default; const renderHello = require("../gen-lib/render-hello").default; @@ -10,14 +10,14 @@ const chai = require("chai"); const expect = chai.expect; process.env.NODE_ENV = "production"; -describe("SSRProfiler template caching", function () { +describe("SSRCaching template caching", function () { beforeEach(() => { - SSRProfiler.setCachingConfig({}); - SSRProfiler.clearCache(); - SSRProfiler.clearProfileData(); - SSRProfiler.enableCaching(false); - SSRProfiler.enableProfiling(false); + SSRCaching.setCachingConfig({}); + SSRCaching.clearCache(); + SSRCaching.clearProfileData(); + SSRCaching.enableCaching(false); + SSRCaching.enableProfiling(false); }); function removeReactChecksum(html) { @@ -49,8 +49,8 @@ describe("SSRProfiler template caching", function () { // Enable caching and test - SSRProfiler.enableCaching(); - SSRProfiler.setCachingConfig({ + SSRCaching.enableCaching(); + SSRCaching.setCachingConfig({ components: { "Hello": { strategy: "template", @@ -61,15 +61,15 @@ describe("SSRProfiler template caching", function () { // should add an entry to cache with template key - SSRProfiler.stripUrlProtocol(true); - SSRProfiler.shouldHashKeys(false); + SSRCaching.stripUrlProtocol(true); + SSRCaching.shouldHashKeys(false); // first just render Hello by itself to create a cache with diff react-id's renderHello("test", message); // eslint-disable-line - const key1 = Object.keys(SSRProfiler.cacheStore.cache)[0]; + const key1 = Object.keys(SSRCaching.cacheStore.cache)[0]; const keyTmpl = key1.substr(6); - const entry1 = SSRProfiler.cacheStore.getEntry("Hello", keyTmpl); + const entry1 = SSRCaching.cacheStore.getEntry("Hello", keyTmpl); expect(entry1.hits).to.equal(1); // render hello again and verify cache @@ -86,10 +86,10 @@ describe("SSRProfiler template caching", function () { // should add an entry to cache with hashed key from template key - SSRProfiler.shouldHashKeys(true); - const hashKey = SSRProfiler.hashKeyFn(keyTmpl); + SSRCaching.shouldHashKeys(true); + const hashKey = SSRCaching.hashKeyFn(keyTmpl); const r2 = renderGreeting("test", message); - const entry = SSRProfiler.cacheStore.getEntry("Hello", hashKey); + const entry = SSRCaching.cacheStore.getEntry("Hello", hashKey); expect(entry.hits).to.equal(1); // now render should use result from cache @@ -98,9 +98,9 @@ describe("SSRProfiler template caching", function () { expect(entry.hits).to.equal(2); expect(r2).includes(message); verifyRenderResults(r1, r2, r3); - SSRProfiler.cacheHitReport(); - expect(SSRProfiler.cacheEntries()).to.equal(2); - expect(SSRProfiler.cacheSize()).to.be.above(0); + SSRCaching.cacheHitReport(); + expect(SSRCaching.cacheEntries()).to.equal(2); + expect(SSRCaching.cacheSize()).to.be.above(0); }); const users = [ @@ -196,44 +196,44 @@ describe("SSRProfiler template caching", function () { }; const testTemplate = (stripUrlProtocol, hashKeys, profiling) => { - SSRProfiler.enableProfiling(profiling); + SSRCaching.enableProfiling(profiling); let start = Date.now(); const r1 = renderBoard(users); const r1Time = Date.now() - start; if (profiling) { - const data = SSRProfiler.profileData; + const data = SSRCaching.profileData; expect(data.Board[0].InfoCard[0].time).to.be.above(0); - SSRProfiler.clearProfileData(); - SSRProfiler.enableProfiling(false); + SSRCaching.clearProfileData(); + SSRCaching.enableProfiling(false); } - SSRProfiler.enableCaching(); - SSRProfiler.setCachingConfig(cacheConfig); - SSRProfiler.shouldHashKeys(hashKeys); - SSRProfiler.stripUrlProtocol(stripUrlProtocol); + SSRCaching.enableCaching(); + SSRCaching.setCachingConfig(cacheConfig); + SSRCaching.shouldHashKeys(hashKeys); + SSRCaching.stripUrlProtocol(stripUrlProtocol); start = Date.now(); let r2 = renderBoard(users); const r2Time = Date.now() - start; - const cache = SSRProfiler.cacheStore.cache; + const cache = SSRCaching.cacheStore.cache; const keys = Object.keys(cache); keys.forEach((x) => { expect(cache[x].hits).to.equal(0); }); - SSRProfiler.enableProfiling(profiling); + SSRCaching.enableProfiling(profiling); start = Date.now(); let r3 = renderBoard(users); const r3Time = Date.now() - start; if (profiling) { - const data = SSRProfiler.profileData; + const data = SSRCaching.profileData; expect(data.Board[0].InfoCard[0].time).to.be.above(0); - SSRProfiler.clearProfileData(); + SSRCaching.clearProfileData(); } console.log(`rendering time r1 ${r1Time}ms r2 ${r2Time}ms r3 (cached) ${r3Time}ms`); @@ -267,15 +267,15 @@ describe("SSRProfiler template caching", function () { it("should support debug caching", function () { renderBoard(users); - SSRProfiler.enableCaching(); - SSRProfiler.enableCachingDebug(); - expect(SSRProfiler.config.debug).to.equal(true); - SSRProfiler.enableCachingDebug(false); - expect(SSRProfiler.config.debug).to.equal(false); - SSRProfiler.enableCachingDebug(true); - expect(SSRProfiler.config.debug).to.equal(true); - SSRProfiler.setCachingConfig(cacheConfig); - SSRProfiler.shouldHashKeys(false); + SSRCaching.enableCaching(); + SSRCaching.enableCachingDebug(); + expect(SSRCaching.config.debug).to.equal(true); + SSRCaching.enableCachingDebug(false); + expect(SSRCaching.config.debug).to.equal(false); + SSRCaching.enableCachingDebug(true); + expect(SSRCaching.config.debug).to.equal(true); + SSRCaching.setCachingConfig(cacheConfig); + SSRCaching.shouldHashKeys(false); const r2 = renderBoard(users); expect(r2).includes("