Webpack does not package unwanted components

problem description


related codes

/ / Please paste the code text below (do not replace the code with pictures)

A:

export default {
name: "A",
data() {
  return {
      showB: appConfig["b"] // appConfigbfalse
  };
},
methods: {
  initComp() {
    Vue.component("B", (resolve) => require(["./b.vue"], resolve));
  }
},
created() {
  if (this.showB) {
    this.initComp();
  }
}

};

what result do you expect?

when I was npm run build, I found that component B was still packaged.
I hope that component B is not packaged when the relevant configuration file is false. Is there any way not to package component through this configuration

?
Mar.28,2021

I don't think your demand is reasonable in itself.

Why don't you type it when you pack it?

your current situation should be that the package will type out the B component separately, and then you will actually download the B component only when your showB is true.
so is there any reason not to type the B component when you have to package it?

in addition, rollup ('s later webpack) supports tree shaking. But as far as I know, this kind of business situation of yours cannot cover .

because packaging tools such as webpack are packaged statically, the value of your expression is not evaluated when it is packaged. So if you really need to achieve your effect, I suggest you change the way you write it:

  

delete components that do not need to be packaged directly

Menu