Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Speed up rendering #310

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Speed up rendering #310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4c10a30
add watch in build process
manishprajapati52 Apr 2, 2024
a112a92
Create custom plugin to add custom string once build complete
manishprajapati52 Apr 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 28 additions & 2 deletions src/helper/build.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import webpack from 'webpack';
import createBaseWebpackConfig from '../helper/theme.react.config';
import fs from 'fs';
import rimraf from 'rimraf';
import open from 'open';
import { reload } from './serve.utils';
import { debounce } from 'lodash';

export const THEME_ENTRY_FILE = path.join('theme', 'index.js');

Expand Down Expand Up @@ -66,6 +69,7 @@ interface DevBuild {
buildFolder: string;
imageCdnUrl: string;
isProd: boolean;
browserLink?: string
}

interface DevReactBuild {
Expand All @@ -77,7 +81,7 @@ interface DevReactBuild {
isHMREnabled: boolean;
}

export function devBuild({ buildFolder, imageCdnUrl, isProd }: DevBuild) {
export function devBuild({ buildFolder, imageCdnUrl, isProd, browserLink }: DevBuild) {
const VUE_CLI_PATH = path.join(
'.',
'node_modules',
Expand All @@ -91,7 +95,7 @@ export function devBuild({ buildFolder, imageCdnUrl, isProd }: DevBuild) {

return new Promise((resolve, reject) => {
let b = exec(
`node ${VUE_CLI_PATH} build --target lib --dest ${buildFolder} --name themeBundle ${THEME_ENTRY_FILE}`,
`node ${VUE_CLI_PATH} build --watch --target lib --dest ${buildFolder} --name themeBundle ${THEME_ENTRY_FILE}`,
{
cwd: process.cwd(),
env: {
Expand All @@ -110,8 +114,30 @@ export function devBuild({ buildFolder, imageCdnUrl, isProd }: DevBuild) {
},
);

let isFirstBuild = true;
const spinner = new Spinner('Building theme');

b.stdout.pipe(process.stdout);
b.stderr.pipe(process.stderr);
const refreshPage = debounce(() => reload(), 1000);
b.stdout.on('data', async (data) => {
if (data.includes("Build process starting...")) {
spinner.start()
}
if (data.includes("Refreshing theme page")) {
if (isFirstBuild) {
try {
await open(browserLink);
} catch (err) {
console.log("Open:", browserLink);
}
isFirstBuild = false;
}else{
refreshPage();
}
spinner.succeed()
}
})

b.on('exit', function (code) {
if (!code) {
Expand Down
8 changes: 8 additions & 0 deletions src/helper/theme.vue.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@ let vueConfig = {};
let fileConfigPath = null;
const context = process.cwd();

class BuildCompletePlugin {
apply(compiler) {
compiler.hooks.done.tap('BuildCompletePlugin', () => {
console.log("Refreshing theme page");
});
}
}

class FDKPlugin {
apply(compiler) {
Expand Down Expand Up @@ -100,6 +107,7 @@ const configureWebpack = (config) => {
if(process.env.BUILD_TYPE === 'sync') {
plugins.push(new FDKPlugin())
}
plugins.push(new BuildCompletePlugin())
if(isCommonJs) {
plugins.push(
new webpack.optimize.LimitChunkCountPlugin({
Expand Down
40 changes: 18 additions & 22 deletions src/lib/Theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
parseBundleFilename,
transformSectionFileName,
findExportedVariable,
debounce,
} from '../helper/utils';
import CommandError, { ErrorCodes } from './CommandError';
import Logger, { COMMON_LOG_MESSAGES } from './Logger';
Expand Down Expand Up @@ -1137,37 +1138,32 @@ export default class Theme {
// initial build
Logger.info(`Locally building`);
Theme.createVueConfig();
await devBuild({
devBuild({
buildFolder: Theme.BUILD_FOLDER,
imageCdnUrl: urlJoin(getFullLocalUrl(port), 'assets/images'),
isProd: isSSR,
browserLink: getFullLocalUrl(port)
});
// start dev server
Logger.info(chalk.bold.blueBright(`Starting server`));
await startServer({ domain, host, isSSR, port });

// open browser
try {
await open(getFullLocalUrl(port));
} catch (err) {
console.log(`Open in browser: ${getFullLocalUrl(port)}`);
}
Logger.info(chalk.bold.green(`Watching files for changes`));
let watcher = chokidar.watch(path.resolve(process.cwd(), 'theme'), {
persistent: true,
});
watcher.on('change', async () => {
Logger.info(chalk.bold.green(`building`));
await devBuild({
buildFolder: Theme.BUILD_FOLDER,
imageCdnUrl: urlJoin(
getFullLocalUrl(port),
'assets/images',
),
isProd: isSSR,
});
reload();
});
// try {
// await open(getFullLocalUrl(port));
// } catch (err) {
// console.log(`Open in browser: ${getFullLocalUrl(port)}`);
// }
// Logger.info(chalk.bold.green(`Watching files for changes`));
// let watcher = chokidar.watch(path.resolve(process.cwd(), '.fdk/dist'), {
// persistent: true,
// });
// watcher.on('change', debounce(()=>{
// Logger.info(chalk.bold.green(`building done`));
// console.log("refresssssssss");

// // reload();
// }, 2000));
} catch (error) {
throw new CommandError(error.message, error.code);
}
Expand Down
Loading