When you export the landing page for one of the target systems in eWizard, the eWizard.js builder adds all blocks from the blocks-library directory to the site build.
Use the requireCurrentBlocks API and the DynamicBlocksLoader component to ensure that the builder adds specific blocks to the build. This feature reduces the resulting build size and improves the site performance in the browser.
TIP: If you don't use the DynamicBlocksLoader component in the template, the eWizard.js builder adds all the blocks to the build.
The set of blocks in the resulting build is different for the development and production builds.
• The development build is when you run the wiz dev or wiz archive command in eWizard CLI locally. For the development build, eWizard.js checks blocks in the blocks.json and blocks-themes.json files. As a result, it excludes all the blocks except the ones used in the specific theme or layout.
• The production build is when you export or publish the project in eWizard Editor. For the production build, eWizard.js adds only the blocks from the current theme of the blocks-themes.json file. If the template doesn't have a blocks-themes.json file, the requireCurrentBlocks is empty, and all blocks are included in the build.
To use the requireCurrentBlocks API:
1) Add the DynamicBlocksLoader component to the App.vue file of your site project.
<!-- ./App.vue --><template>
<wiz-root :class="[$editor.mode, ...$DT.rootClasses, { 'opened-in-editor': $editor.isOpenedInEditor }]">
<DynamicBlocksLoader
:blocks-themes="blockThemes"
:blocks-list="blocksList"
></DynamicBlocksLoader>
</wiz-root>
</template><script>
import { DynamicBlocksLoader } from 'ewizardjs';
import { themes } from './common/blocks-library/blocks-themes.json';
import { components } from './common/blocks-library/blocks.json';export default {
name: 'wiz-app',
components: {
DynamicBlocksLoader,
},
data() {
return {
blockThemes: themes,
blocksList: components,
};
},
},
};
</script><style lang="scss">
@import 'common/styles/imports.scss';.previewer-app-container .root {
width: 1920px !important;
max-width: none !important;
}
</style>2) Import the requireCurrentBlocks API to the globalBlocks.js file.
// ./common/extensions/globalBlocks.jsimport { requireCurrentBlocks } from 'ewizardjs';const blocks = requireCurrentBlocks();export default function (Vue) {
blocks.forEach((block) => {
Vue.component(block.name, block);
});
}As a result, the production build includes only the blocks from the blocks-themes.json file.