CODEWITHSUNDEEP
javascriptvue.jsbuildvue-component
Savan S
Savan S

Reputation: 417

Vue.js moduler build

We have project of around 100 pages. We are migrating our front end to some emerging technology. We almost have finalized Vue.js(with vue cli). Vue CLI is building project in one build.js. We have a problem with that. We have frequent requirement changes. So after every small change, we will have to upload whole build js and that will need regression testing of the whole project. Is there any way that build will be module wise? So that only changed module need to be uploaded on live after changes.

Upvotes: 2

Views: 86

Answers (1)

Chucky
Chucky

Reputation: 126

Using the Vue router:

The following approach will tell the compiler (Webpack) to "return" the component vs "including" it. Resulting in the given component being "chunked" into its own file for lazy loading.

e.g.

export default new Router({
    routes: [
        // Home component to be included in bundle.js
        {
            path: '/',
            name: 'home',
            component: Home
        },
        // code splitting - generate a separate unique chuck for about component.
        {
            path: '/about',
            name: 'about',
            component: () => import(/* webpackMode: "lazy" */ '@/views/About.vue')
        }
    ]
})

Output = bundle.js and about.js or... 100 other files, given you have a component per page.

Using webpack:

You can extend and/or modify the default compiler (webpack) configuration by adding a vue.config.js file to the project root.

e.g.

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // mutate config for production...
    } else {
      // mutate for development...
    }
  }
}

Be sure to read all the documentation at https://cli.vuejs.org/guide/webpack.html as some settings should not be mutated directly.

Upvotes: 1

Related Questions