Question

我们假设我有一个文件<google-map>组件，其中的模板具有<widget>组件和<marker>组件。

如果我动态导入我的<google-map>组件，它将如下所示：

Vue.component(
    'google-map',
    () => import('@/components/maps/GoogleMapAsync.vue')
);

现在我知道我不需要谷歌地图组件之外的标记或小部件组件。

因此，当我的地图组件加载时，我还要导入该文件具有的所有导入，甚至最好一直到该树的底部。

所以我的地图，小部件和标记组件都将被拆分为一个块。

有没有办法在Webpack中自动执行此操作，而不是持续链接承诺或解决来自Promises.all堆栈的承诺？

我想一种方法是将所有导入放在同一个块中，如下所示：

import(/* webpackChunkName: 'googlemap', '@/components/maps/GoogleMapAsync.vue')

对于我希望成为googlemap块一部分的每个组件执行此操作，但对于我希望可以自动执行的操作，这仍然是很多手动工作。

Answer 1

试试这个babel-plugin-syntax-dynamic-import webpack插件，可以使用webpack块进行导入。还要确保生成块。

// Webpack 
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js',
    chunkFilename: '[name].js'
  },

  rules: [{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    options: {
      plugins: [require('babel-plugin-syntax-dynamic-import')]
    }
  }]


// Vue code
methods: {
    LoadMarker() {
     this.componentMarker = () => import (`./path`)
        // Vue.js < 2.5 .0 // .then(m=> m.default) ; 
        }
  }

<component :is="componentMarker"></component>

如何使用webpack动态导入子模块？

1 个答案: