How to properly Remove certain CSS / JS files from template

Question

I need to create an optimised version of my header and footer and remove a lot of the CSS and JS which is being included. How would I go about doing this?

For example, I want to remove all references to Woocommerce from the header and footer for a particular template but keep it included in all other templates. I have created a new template with a new header and footer and call them like so: get_header('optimised'); however the function then calls wp_head() function which somehow includes all the files required for Woocommerce.

How do I remove these for the 'optimised' template only?

I would expect to something like the below into the functions.php file, however this relates to woocommerce emails.

//remove woocommerce if 'optimised' template
function remove_woo_header_footer(){
   remove_action('woocommerce_email_header', array( $object, 'email_header' ));
   remove_action('woocommerce_email_footer', array( $object, 'email_footer' ));
}
add_action( 'woocommerce_email', 'remove_woo_header_footer' );

many thanks

/**********UPDATE**********/

After implementing @Omar Soliman's solution, I have the below still showing in the source code. How would I remove that also?

<script type='text/javascript'>
/* <![CDATA[ */
var wc_add_to_cart_params = {"ajax_url":"\/example.com_new\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/example.com_new\/optimised\/?wc-ajax=%%endpoint%%","i18n_view_cart":"View Cart","cart_url":"http:\/\/localhost\/example.com_new\/cart\/","is_cart":"","cart_redirect_after_add":"no"};
/* ]]> */
</script>
<script type='text/javascript' src='//localhost/example.com_new/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=2.4.10'></script>
<script type='text/javascript' src='http://localhost/example.com_new/wp-content/plugins/js_composer/assets/js/vendors/woocommerce-add-to-cart.js?ver=4.8.1'></script>
<meta name="generator" content="WooCommerce 2.4.10" />

Answer 1

You can use this function that removes woocommerce styles/scripts if it's your custom template, remember to change YOUR_TEMPLATE_FILE.php to match the specified template you want to remove the woocommerce css/js from it.

add_action( 'wp_enqueue_scripts', 'woo_cleaner', 99 );

function woo_cleaner() {
    remove_action( 'wp_head', array( $GLOBALS['woocommerce'], 'generator' ) );

    //dequeue scripts and styles if template matches
    if ( is_page_template('YOUR_TEMPLATE_FILE.php') ) {
            wp_dequeue_style( 'woocommerce-layout' );
            wp_dequeue_style( 'woocommerce-smallscreen' );
            wp_dequeue_style( 'woocommerce-general' );
            wp_dequeue_style( 'wc-bto-styles' );
            wp_dequeue_script( 'wc-add-to-cart' );
            wp_dequeue_script( 'wc-cart-fragments' );
            wp_dequeue_script( 'woocommerce' );
            wp_dequeue_script( 'jquery-blockui' );
            wp_dequeue_script( 'jquery-placeholder' );
    }
}
remove_action('wp_head', 'wc_generator_tag');