webpack不打包不需要的组件

Question

问题描述

现在有个需求，通过配置文件来决定相关的组件需不需要打包

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

A组件：

export default {
name: 'A',
data() {
  return {
      showB: appConfig['b'] // 这里的appConfig是配置文件，b是false
  };
},
methods: {
  initComp() {
    Vue.component('B', (resolve) => require(['./b.vue'], resolve));
  }
},
created() {
  if (this.showB) {
    this.initComp();
  }
}

};

你期待的结果是什么？

在我npm run build的时候，我发现B组件还是打包进去了
我希望在相关配置文件为false的时候，不将B组件打包进去，有什么方法可以通过这种配置不将组件打包呢

Answer 1

我觉得你这种需求本身就不合理。

为什么要打包就不打进去呢？

你现在的情况应该是打包会单独将B组件打出来， 然后当你的showB为true才会真正去下载B组件。
因此还有什么理由是非要打包的时候就不打出B组件吗？

另外，rollup（后来的webpack）是支持tree shaking的。 但据我所知，你的这种业务情况还是无法覆盖的。

由于webpack等打包工具是静态打包的， 打包的时候不会去计算你的表达式的值。 因此如果你真的需要实现你的效果的话，建议你将写法变化一下:

if (process.env.NODE_ENV) {
this.initComp();
}
然后使用webpack插件 definePlugin去替换process.env.NODE_ENV的值实现效果。

Answer 2

直接删掉不用打包的组件