[英]When would webpack's import() not create a new file?
I am using the webpack import statemement to load my UI based on some logic within a promise chain: 我正在使用webpack import statemement根据承诺链中的某些逻辑来加载我的UI:
initLoader()
.then( loaderData => initCmp(loaderData) )
.then( () => initApi )
.then( () => import(/* webpackChunkName: "ui" */ './ui/main.js') )
.then( (app) => app.default(1) )
.catch();
This works fine, but webpack is not creating a new chunk / file based on this code split point. 这可以正常工作,但是webpack不会基于此代码拆分点创建新的块/文件。 I cannot seem to find any resources which explain in depth how this feature works. 我似乎找不到任何资源来深入说明此功能的工作原理。
I am importing a default export function which renders the UI, the file looks like: 我正在导入呈现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;
I am wondering, does webpack analyse dependencies further down the tree and not make a code split point? 我想知道,webpack是否在树的更下方分析依赖关系,而不创建代码分割点?
At this stage I am not worried if I am loading some dependency twice, I am just trying to get the dynamic code split to function and can work on cleaning the dependencies later. 在此阶段,我不担心是否要两次加载某些依赖项,我只是想让动态代码分裂为功能,并可以在以后清理依赖项。
EDIT: Webpack config - I am using v4 编辑:Webpack配置-我正在使用v4
output: {
path: path.resolve(__dirname, 'dist'),
publicPath : isProduction ? PRODUCTION_HOST : '/',
filename: '[name].bundle.js',
chunkFilename: '[name].chunk.bundle.js',
},
EDIT 2: Just to show that my setup is fine, when loading async components from vuejs, as per the below all works fine: 编辑2:只是为了表明我的设置很好,当从vuejs加载异步组件时,按照以下所有方法都可以:
Vue.component('Modal', () => import(/* webpackChunkName: "modal" */ './components/Modal.vue'));
Thanks in advance. 提前致谢。
It seems webpack is smarter than I! 似乎webpack比我聪明!
The issue was that I had already elsewhere in my app imported this specific module into the dependency tree. 问题是我已经在我的应用程序的其他地方将此特定模块导入到依赖树中。
The outcome was that the import statement was working, but it was not creating a new chunk. 结果是import语句正在工作,但没有创建新的块。
Would be nice if webpack could maybe point this out, in large projects I can see this happening quite often during a refactor. 如果webpack可以指出这一点,那就太好了,在大型项目中,我可以看到重构期间经常发生这种情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.