在前端打包時，加入了source map之後文件變大如何處理？

在前端打包時，加入了source map。結果文件後面加上了//# sourceMapping……，導致js、css文件變大，下載時間過長，這樣不就沒有達到優化的效果了嗎？請問這樣怎麼解決

---

你們都沒理解題主的意思，上來就是嘲諷。題主看了你們回答也一頭霧水。

題主應該是不小心生成了 inline soucemaps（內聯的 data uri），就是 soucemaps 被直接 include 在目標文件里了，這樣體積確實會大好多，影響下載時間也不是不可能的。

姑且假設題主就是使用 Sourcemaps 工具或者其 gulp-sourcemaps 插件。在最後一步，若是 `sourcemaps.write()` 便是 inline 的，`sourcemaps.write(".") 便是 external（外部） 的。

var gulp = require("gulp");
var plugin1 = require("gulp-plugin1");
var plugin2 = require("gulp-plugin2");
var sourcemaps = require("gulp-sourcemaps");

gulp.task("javascript", function() {
gulp.src("src/**/*.js")
.pipe(sourcemaps.init())
.pipe(plugin1())
.pipe(plugin2())
.pipe(sourcemaps.write(".")) // 這裡換成實際要存放的位置
.pipe(gulp.dest("dist"));
});


---

source map 可以有很多種格式，生成單獨的 .map 文件不會影響代碼體積。

configuration

---

瀉藥

這個...

我可以說不加就好了么...

我不知道你用的什麼打包，但是打包工具應該都可以配置是否需要sourcemap的。

---

開發環境直接源碼

測試環境普通壓縮（即不壓縮變數名）+sourcemap（.map文件）

生產環境碾碎壓縮（即壓縮變數名）

---

時至今日我覺得sourcemap對於業務代碼沒有任何卵用。

---

Source map的用途在於線上如果出了bug，在minified的代碼上報的錯難以理解。

如果使用source map，則可以將uglified的stacktrace變換到源代碼去，才能看得懂。

Source map本身不一定打包到線上的代碼中。

---

加一個環境判斷唄，開發環境就用 inline-source-map，其他環境就不要用了

---

這個問題我做過的項目也遇到過，用webpack壓縮打包後發現文件體積反而變大了，查了半天才知道原來是sourcemap的原因，不過sourcemap這個東西本來也就是方便你開發時候能找到bug位置，真正上線的話是沒必要有的吧，部署線上的時候不添加sourcemap就好了。

不知道這種處理方式能解決答主問題不=_=

---

sourcemap是開發環境才用的，最終用戶誰會關心sourcemap？所以你應該考慮考慮你的需需求…

---

推薦閱讀：