1

假设我有一个文件<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块的一部分的每个组件执行此操作，但这仍然是我希望可以自动化的东西的大量手动工作。

4

1 回答 1

0

试试这个 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>

于 2018-05-08T09:57:13.797 回答