split bundle.js by each page

[tentree-development]

Has anyone try to split components by page like home page, collection page, product page? If so can you share your webpack.config.js setting or if you can forward me to the article that would be great! Currently my bundle.js becomes 400kb so hope to split by page

[thevrus]

webpack.common.js

entry: {
    main: path.resolve(__dirname, "../../src/main.js"),
    account: path.resolve(__dirname, "../../src/account.vue.js"),
    register: path.resolve(__dirname, "../../src/register.vue.js"),
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [
        "*.map",
        "main.*",
        "account.*",
        "register.*",
      ],
    })
}

.gitignore

# Compiled
/shopify/assets/account.*
/shopify/assets/main.*
/shopify/assets/register.*

file.liquid

{{ 'account.css' | asset_url | stylesheet_tag }}
<script src="{{ 'account.js' | asset_url }}" defer="defer"></script>

[tentree-development]

Thanks, I assume copy and paste the content of main.js to register.js and account.js correct? Do we need to create folder? I noticed in main.js it's importaing under /vue/components so I feel like I need to have folder for each page.

[tentree-development]

I changed my webback.common.js like this and include home.js and home.css in theme.liquid but the page is partially loaded it seems missing some files css for tailwind is not generated. Then copy main.js and create home.js so tailwind style will be attached then file size is go back to the original. for home.js do i need to filter out some of components not used in home page? Any idea?

webpack.common.js

'bundle':{
	path.resolve(__dirname, '../../src/main.js'),
},
'home':{
        path.resolve(__dirname, '../../src/home.js'), //???
	path.resolve(__dirname, '../../src/libraries/home-A-component.vue'),
	path.resolve(__dirname, '../../src/libraries/home-B-component.vue'),
	path.resolve(__dirname, '../../src/libraries/home-C-component.vue'),
	path.resolve(__dirname, '../../src/libraries/home-D-component.vue'),
},
'about':{
	path.resolve(__dirname, '../../src/libraries/about-A-component.vue'),
	path.resolve(__dirname, '../../src/libraries/about-B-component.vue'),
	path.resolve(__dirname, '../../src/libraries/about-C-component.vue'),
	path.resolve(__dirname, '../../src/libraries/about-D-component.vue'),	
}

home.js --- part of home.js in createVueApp function

const vueComponents = require.context('./vue/components/', true, /\.(vue|js)$/)

    vueComponents.keys().forEach(key => {
        const component = vueComponents(key).default

        let homeComponents = [
          "about-A-component.vue", "about-B-component.vue", ....        ];
        // if a component has a name defined use the name, else use the path as the component name
        const name = component.name
        ? component.name
        : key.replace(/\.(\/|vue|js)/g, '').replace(/(\/|-|_|\s)\w/g, (match) => match.slice(1).toUpperCase())
        
        if(homeComponents.indexOf(name) < 0){
          console.log('name: === ' + name + homeComponents.indexOf(name));
          app.component(name, component)
        }else{
          console.log('skip: === ' + name);
        }
    })

[lukecharle]

To work on a more dynamic basis something like this would work (file paths may need changing)

entry: glob.sync('./src/js/**/*.js').reduce((acc, path) => {
  const entry = path.replace(/^.*[\\\/]/, '').replace('.js', '');
  acc[entry] = path;
  return acc;
}, {}),
output: {
  path: path.resolve(__dirname, '../../shopify/assets/'),
  filename: 'bundle.[name].js'
},