背景
使用 weex-toolkit 作為腳手架建立 weex 的項目，在項目規模越來越大是，每一次修改檔案，編譯會越來越慢。answer 這個項目 vue 元件衆多 (30+)，每次即便一個元件的文案修改，也會長達 30s 的時間。觀察到，用時最多的時間在 asset optimization 上
在 google 搜了下，發現也有同學遇到了相同的問題：
https://github.com/weexteam/weex-toolkit/issues/315分析
難道我們修改一個檔案，所有檔案的編譯都要走一遍？通過 webpack 輸出的資訊并不是這樣
修改一個檔案，隻有一個 vue 做了編譯，速度很快，和 asset optimization 沒有多大關系，那問題可能會出現在哪裡？
weex 腳手架提供的是多頁開發的方式，會給每一個 vue 檔案都是一個 entry，都會生成對應的 html 去預覽這個元件。
const getEntryFile = (dir) => {
dir = dir || '.';
const directory = helper.root(dir);
fs.readdirSync(directory).forEach((file) => {
const fullpath = path.join(directory, file);
const stat = fs.statSync(fullpath);
const extname = path.extname(fullpath);
if (stat.isFile() && extname === '.vue') {
const name = path.join(dir, path.basename(file, extname));
if (extname === '.vue') {
const entryFile = path.join(vueWebTemp, dir, path.basename(file, extname) + '.js');
fs.outputFileSync(entryFile, getEntryFileContent(entryFile, fullpath));
webEntry[name] = entryFile;
}
weexEntry[name] = fullpath + '?entry=true';
}
else if (stat.isDirectory() && file !== 'build' && file !== 'include') {
const subdir = path.join(dir, file);
getEntryFile(subdir);
}
});
}
在 preview.html 頁面上，也可以切換不同的 button 去預覽不同的元件。
會不會是時間大多數時間都耗費在這上面呢？
在排查的過程中，這個文章引起了我的注意
https://www.v2ex.com/t/4197978396ms asset optimization
95% emitting
大多數時間都花在了 asset optimization 上，下面也提出，
https://github.com/mzgoddard/hard-source-webpack-plugin做了優化
和 html-webpack-plugin 的 diff：
https://github.com/jantimon/html-webpack-plugin/compare/master...daifee:master大概思路就是設定一個變量，如果這個之前編譯過，為 true，如果有修改其為 false。當 true 的時候跳過再次編譯。
在項目中試了一下，果然提升了很大。
優化前：
優化後：
總的編譯時間提升了 95%，罪魁禍首應該就是這個了。
給 weex 的 webpack 模闆送出了個PR
https://github.com/weex-templates/webpack/pull/5，大家用最新版不會遇到編譯時間長的問題了。