0

我正在使用 webpack 导入语句根据承诺链中的一些逻辑加载我的 UI：

initLoader()
  .then( loaderData => initCmp(loaderData) )
  .then( () => initApi )
  .then( () => import(/* webpackChunkName: "ui" */ './ui/main.js') )
  .then( (app) => app.default(1) )
  .catch();

这工作正常，但 webpack 不会基于此代码拆分点创建新的块/文件。我似乎找不到任何资源来深入解释此功能的工作原理。

我正在导入呈现 UI 的默认导出函数，文件如下所示：

import Vue from 'vue';
import Vuikit from 'vuikit';

// import and make global all components
import App from './App.vue';
Vue.component('app-init', App);

// creating a root in the DOM for the app to attach to, when called
const divToAttachApp = document.createElement('div');
divToAttachApp.setAttribute('id', 'cmp-app');
document.body.appendChild(divToAttachApp);

// create the app instance and attach it to the DOM in a hidden state
const vm = new Vue(App).$mount('#cmp-app');

// this function is called to load the UI, it accepts the clientId
function renderVueApp(clientId) {
  return new Promise((resolve, reject) => {
    if (vm) {
      vm.$store.dispatch('setClientId', parseInt(clientId));
      vm.$store.commit('changeShowState', true);
      EventBus.$on('save-selection', value => {
        console.log(`CMP-UI :: Resolving Promise (save-selection): ${JSON.stringify(value)}`);
        resolve(value);
      });
    } else {
      console.error(`CMP-UI :: No App Present`);
    }
  });
}

export default renderVueApp;

我想知道，webpack 是否会在树的下方分析依赖关系而不是进行代码拆分点？

在这个阶段，我并不担心我是否会加载一些依赖项两次，我只是想让动态代码拆分以运行，然后可以在以后清理依赖项。

编辑：Webpack 配置 - 我正在使用 v4

  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath : isProduction ? PRODUCTION_HOST : '/',
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.bundle.js',

  },

编辑 2：只是为了表明我的设置很好，当从 vuejs 加载异步组件时，按照以下所有工作正常：

Vue.component('Modal', () => import(/* webpackChunkName: "modal" */ './components/Modal.vue'));

提前致谢。

4

1 回答 1

2

看来 webpack 比我聪明！

问题是我已经在我的应用程序的其他地方将此特定模块导入到依赖关系树中。

结果是 import 语句正在工作，但它没有创建新块。

如果 webpack 可以指出这一点，那就太好了，在大型项目中，我可以在重构期间看到这种情况经常发生。

于 2018-06-18T08:43:48.413 回答