Oracle Jet View Models - Is bundling possible?

User_0ZPYQ

Hi All!

I've been working with a larger scale OJet project - and despite my efforts - have been unable to successfully bundle my view Model JS files together.

Technicality aside, Yes or No, is this a supported feature within OJet currently? I've taken a look into the current support minification process for OJet: `ojet serve/build --release`. But upon investigating the dist folder, nothing appears to be bundled or minified (Outside the components).

Thanks for the help on this - performance has become an issue on this project, hence bundling and minification has jumped up in priority for this. My solution so far has been to use terser and minify the View Models via bash. Bundling would be the biggest time save here.

Mstarets-Oracle

I do not think JET CLI does this out of the box, but you can experiment with the 'include' option of r.js optimizer: https://requirejs.org/docs/optimization.html

Duncan Mills-Oracle

Here's a generic before_optimize hook (/scripts/hooks/before_optimize.js) that will automatically find the modules that you are using (based on the default location of views and viewModels) and include them into the bundle configuration.

With this in place all the modules will be read from the bundle.js rather than being loading separately on first access - you may need to amend this if your structure is different but it shows the idea.

/**

Copyright (c) 2015, 2022, Oracle and/or its affiliates.

Licensed under The Universal Permissive License (UPL), Version 1.0

as shown at https://oss.oracle.com/licenses/upl/

*/

const fs = require('fs-extra');

const path = require('path');

'use strict';

/*

* before_build hook to automatically include JET module implementations into

* the main program bundle

*/

module.exports = function (configObj) {

return new Promise((resolve, reject) => {

console.log("Before Optimize - retreiving module list");

//Read the oraclejetconfig.json to locate the correct output folder to read

const jetConfigName = 'oraclejetconfig.json'; //will be in the root

if (fs.pathExistsSync(jetConfigName)) {

const jetConfig = fs.readJSONSync(jetConfigName);

const webFolder = jetConfig.paths.staging.web;

const viewImplFolder = path.join(webFolder, 'js', 'viewModels');

const viewModels = getIncludeFiles(viewImplFolder);

const viewFolder = path.join(webFolder, 'js', 'views');

const views = getIncludeFiles(viewFolder);

const includeFiles = [...viewModels, ...views];

//Add the retrieved list of extra files to the optimizer configuration

console.log(`Before Optimize - Adding ${includeFiles.length} files to optimizer list`);

configObj.requireJs.include = includeFiles; //The key configuration step!

}

else {

console.error('\tERROR: Unable to read oraclejetconfig.json');

}

resolve(configObj);

});

};

/*

* Function to gather the names of all the files in the target folder

* This could be enhanced to recurse through sub-folders if required

* The only trickery here is to return the paths to the files relative to

* the root that the optimization process will be based on - hence the use

* of reducedRoot below

*/

function getIncludeFiles(inFolder) {

const foundFiles = [];

const reducedRoot = inFolder.split(path.sep).slice(2).join(path.sep);

fs.readdirSync(inFolder).forEach((fileOrDirectory) => {

const fullPath = path.join(inFolder, fileOrDirectory);

if (!fs.statSync(fullPath).isDirectory()) {

if (path.extname(fileOrDirectory) === '.js') {

//strip the extension as that is not needed for js files

const withoutExt = path.basename(fileOrDirectory,'.js');

foundFiles.push(path.join(reducedRoot, withoutExt));

}

else {

//html and json files will be loaded via the text! plugin and

//need to retain the extension.

foundFiles.push('text!' + path.join(reducedRoot, fileOrDirectory));

}

}

});

return foundFiles;

}

Duncan Mills-Oracle

Here's a more complete write up:

https://blogs.oracle.com/groundside/post/oracle-jet-application-optimization---bundling-modules