CODEWITHSUNDEEP
javascriptvue.jswebpackvuejs2vue-cli
vitors
vitors

Reputation: 175

How to create a Single Entry JS File for VueJS

I have a project in Vue that is going to be big, so we are splitting the code in chunks with Webpack configuration, but when I build the project with vue-cli-service, it generates an index.html that prefetches/preloads all the chunks. I don't want to use this index.html. I need a single entry file for Vue that will start the app and import the other files as requested.

I tried splitChunks: false in Webpack, but it didn't help:

configureWebpack: {
   optimization: {
     splitChunks: false
   }
}

Tried removing the other imports and keeping only the app.js, but that also didn't help.

We are using import(/* webpackChunkName: "login" */ './views/Login.vue'), but not in all components.

I previously had another Vue project that worked the way I want: only an app.js and a vendor.js that import other chunks as needed. Back then, I wasn't using vue-cli-service; rather just a simple Webpack config and System.import( /* webpackChunkName: "Login" */ '@/components/pages/login/Login.vue') in all components that import the route files:

<html>
...
    <body>
        <div id=app></div>
        <script type=text/javascript src=/static/js/vendor.2f58f4045cb046ff1dac.js>
        </script>
        <script type=text/javascript src=/static/js/app.877179012e83c1c97b77.js>
        </script>
    </body>
</html>

I would like to build my project and have a single JS file that I can import in another HTML file, and it will act as a starter file.

Do I just need the System.import in all imports? Any other configurations with vue-cli-service?

Upvotes: 1

Views: 1926

Answers (1)

tony19
tony19

Reputation: 138306

The preload and prefetch scripts that are inserted into index.html (by @vue/preload-webpack-plugin) can be disabled via chainWebpack, yielding only one JavaScript import of app.js in index.html:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.optimization.delete('splitChunks') // no vendor chunks
    config.plugins.delete('prefetch')         // no prefetch chunks
    config.plugins.delete('preload')          // no preload chunks
  }
}

Upvotes: 2

Related Questions