Giter Club home page Giter Club logo

magepack-magento's Introduction

MagePack Magento 2 Module

This is a Magento 2 part of Magepack that handles configuration and loading of bundles prepared by a frontend tool.

For detailed description of the functionalities and walkthrough please refer to Magepack.

Installing

It is recommended to install this extension using composer package manager:

composer require creativestyle/magesuite-magepack

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

License

This project is licensed under the OSL-3.0 license - see the LICENSE.md file for details

Acknowledgments

magepack-magento's People

Contributors

diwipl avatar leone avatar pinkeen avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

magepack-magento's Issues

Magento Cloud: ERROR Cannot read property 'length' of undefined

Running it on Magento Cloud I'm receiving this error below, could you help me with it?

Screen Shot 2022-02-25 at 3 55 10 PM

I have the magepack root file in the server with the Composer module installed and enabled.
My .magento.app.yaml is like this below.

hooks:
    # We run build hooks before your application has been packaged.
    build: |
        set -e
        ./theme_compiler_install.sh
        ./theme_compiler.sh
        php ./vendor/bin/ece-tools build:generate
        echo "\n================================== Install and configure Magepack - Start ==============================="
        unset NPM_CONFIG_PREFIX && { curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | dash ; } && export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" && nvm current && nvm install --lts=dubnium && npm install -g magepack        
        echo "\n================================== create bundle ==============================="
        [ -e "./magepack.config.js" ] && .nvm/versions/node/*/bin/node .nvm/versions/node/*/bin/magepack bundle
        echo "\n================================== Install and configure Magepack - END ================================="
        npm config get prefix
        php ./vendor/bin/ece-tools cron:kill
        php ./vendor/bin/ece-tools build:transfer
    # We run deploy hook after your application has been deployed and started.
    deploy: |
        php ./vendor/bin/ece-tools deploy
    # We run post deploy hook to clean and warm the cache. Available with ECE-Tools 2002.0.10.
    post_deploy: |
        php ./vendor/bin/ece-tools post-deploy
        php ./vendor/bin/ece-tools cron:unlock

Can't turn on Magepack magento setting

Using Magento 2.4.1, PHP 7.4

Installed Magepack and also Magepack Magento Module 1.1.4

Module is enabled, but the option to turn Magepack on is missing from Admin panel in Developer mode
Even trying to turn it on via CLI gives this error:

The "dev/js/enable_magepack_js_bundling" path doesn't exist. Verify and try again.

use preload instead of prefetch

why do we use prefetch instead of preload?

I understand prefetch will only load JS when the CPU is idle while preload will transfer file from network first. So prefetch is not optimized to pagespeed, a better option might be "preload"+"async" ?

Why prefetch?

Currently the module is using "prefetch" link tags to hint the browser how scripts should be loaded:
https://github.com/magesuite/magepack-magento/blob/1.x/view/frontend/templates/bundles-loader.phtml#L10-L14

However prefetch is used to hint the browser about resources that will most likely be used on the next navigation, considering the scripts are loaded on the page they're supposed to be used this doesn't make a lot of sense.

Shouldn't this be using "preload" instead? The scripts are definitely needed on the page they're loaded on so it would help to get the browser to load them as soon as possible.

Magento loading min.js file ?

Hello

Is it normal that Magento is still charging the min.js file for the current the page ?

image

If yes why ?
If no, is it possible to remove it ? On other tests this min file take a long time to be executed.

Thanks.

magepack js is loaded before css and page looks ugly while loading

MagePack is loading its JS before the CSS. And this makes the page look ugly while loading the page.

The order in which JS & CSS are loaded are (for example for Homepage):

<link rel="prefetch" as="script" href="./magepack/bundle-common.min.js"/>  
<link rel="prefetch" as="script" href="./magepack/bundle-cms.min.js"/> 
<...css files...>

Question: How to make the JS load after the CSS? or Defer to the footer?
Note that Move JS code to the bottom of the page = Yes

Unable to execute command "magepack bundle"

Hello Team,

I have started looking at this pack for bundling and performance improvement so I have installed the magepack and after executing the "magepack bundle" I am getting the below error

magepack bundle
ℹ Using bundling config from "/var/www/html/localproject/magepack.config.js".
ℹ Creating bundles for "pub/static/frontend/Magento/luma/en_US".
ERROR bundlingConfig.forEach is not a function
at /home/user/.nvm/versions/node/v14.4.0/lib/node_modules/magepack/lib/bundle.js:34:24
at Array.forEach ()

Magepack version = 2.8.0
Node version = v14.4.0
Magento 2.4.1 open source
Screenshot from 2022-07-04 14-58-28

Could you please help me out?? I really need this.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.