點燈坊

失くすものさえない今が強くなるチャンスよ

使 Production Build 不產生 Source Map

Sam Xiao's Avatar 2020-07-28

Chrome 可藉由 Source Map 在 Dev Tools 顯示 Vue 的 Source Code,但你可能希望 yarn build 之後的 Production Build 不要產生 Source Map,此需求可藉由 vue.config.js 設定達成。

Version

macOS Catalina 10.15.6
Vue CLI 4.4.6
Vue 2.6.11
Chrome 84.0.4147.89

Enable Source Map

map001

預設使用 yarn build 產生 HTML 、 JS 與 CSS 時,會產生 .js.map

map000

Chrome 可藉由 .js.map 還原 App.vue,可發現 Vue 的 source code 完整暴露在 Dev Tools,這只適合在開發時使用。

Disable Source Map

vue.config.js

module.exports = {
  productionSourceMap: process.env.NODE_ENV != 'production'
}

在 project 根目錄新增 vue.config.js,新增 productionSourceMap property,只有在 production 時,也就是 yarn build 不產生 .js.map

map004

yarn build 不再產生 .js.map

map002

由於沒有 source map,Chrome 的 Dev Tools 無法再顯示 Vue 的 source code。

Conclusion

  • 理論上 yarn build 應該不產生 JavaScript 的 source map,但 Vue CLI 預設並非如此,必須自行在 vue.config.js 設定

Reference

Vue CLI, vue.config.js productionSourceMap