Question

我们有大约100页的项目。我们正在将前端迁移到一些新兴技术。我们几乎完成了Vue.js（带有vue cli）的定稿。 Vue CLI正在一个build.js中构建项目。我们对此有疑问。我们经常更改需求。因此，在进行每个小更改之后，我们将必须上传整个build js，这将需要对整个项目进行回归测试。有什么办法可以使模块明智吗？这样，只有更改后的模块才需要在更改后实时上传。

Answer 1

使用Vue路由器：

以下方法将告诉编译器（Webpack）“返回”组件而不是“包含”该组件。导致给定的组件被“分块”到其自己的文件中以进行延迟加载。

例如

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')
        }
    ]
})

输出 = bundle.js和about.js或... 100个其他文件（假设每页有一个组件）。 < / p>

有关组件延迟加载的更多信息：https://router.vuejs.org/guide/advanced/lazy-loading.html

使用Webpack：

您可以通过将vue.config.js文件添加到项目根目录来扩展和/或修改默认编译器（webpack）配置。

例如

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

请确保阅读https://cli.vuejs.org/guide/webpack.html上的所有文档，因为某些设置不应直接更改。

有关Webpack代码拆分的更多信息：https://webpack.js.org/guides/code-splitting

Vue.js Moduler构建

1 个答案: