在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ webpack不打包不需要的組件

webpack不打包不需要的組件

問題描述

現(xiàn)在有個需求,通過配置文件來決定相關(guān)的組件需不需要打包

相關(guān)代碼

// 請把代碼文本粘貼到下方(請勿用圖片代替代碼)

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();
  }
}

};

你期待的結(jié)果是什么?

在我npm run build的時候,我發(fā)現(xiàn)B組件還是打包進(jìn)去了
我希望在相關(guān)配置文件為false的時候,不將B組件打包進(jìn)去,有什么方法可以通過這種配置不將組件打包呢

回答
編輯回答
傻丟丟

我覺得你這種需求本身就不合理。

為什么要打包就不打進(jìn)去呢?

你現(xiàn)在的情況應(yīng)該是打包會單獨將B組件打出來, 然后當(dāng)你的showB為true才會真正去下載B組件。
因此還有什么理由是非要打包的時候就不打出B組件嗎?

另外,rollup(后來的webpack)是支持tree shaking的。 但據(jù)我所知,你的這種業(yè)務(wù)情況還是無法覆蓋的。

由于webpack等打包工具是靜態(tài)打包的, 打包的時候不會去計算你的表達(dá)式的值。 因此如果你真的需要實現(xiàn)你的效果的話,建議你將寫法變化一下:

if (process.env.NODE_ENV) {
this.initComp();
}
然后使用webpack插件 definePlugin去替換process.env.NODE_ENV的值實現(xiàn)效果。
2017年12月28日 11:56
編輯回答
不舍棄

直接刪掉不用打包的組件

2018年9月8日 11:05