溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
由于 webpack3升級后，新增了 Scope Hositing（作用域提升） 功能，據說是對 js的性能提升很大。因此，我們做了一個測試對比，就是 webpack3和 webpack1/2 的性能對比，如下：
測試目標
以下數(shù)據是2天隨機時段3部手機各2組數(shù)據，每組數(shù)據都是30次取平均值，為了測試js的解析能力，排除了網絡請求的影響
平臺：M5 Note Build/MRA58K
系統(tǒng)：android 6.0
| 時間 | before | after |
|---|---|---|
| 2017-08-10 13:00 | 920 | 511 |
| 2017-08-11 11:10 | 915 | 543 |
平均提升：42.55%
平臺：MI 3C Build/KTU84P
系統(tǒng)：Android 4.4.4
| 時間 | before | after |
|---|---|---|
| 2017-08-13 15:00 | 648 | 365 |
| 2017-08-14 17:10 | 648 | 377 |
平均提升：42.74%
平臺：SM901 Build/MXB48T
系統(tǒng)：Android 6.0.1
| 時間 | before | after |
|---|---|---|
| 2017-08-13 18:00 | 593 | 393 |
| 2017-08-14 15:50 | 575 | 392 |
平均提升：32.75%
以上數(shù)據，提升比例雖然有所差距，但是，最后的結果，都表明......你應該毫不猶豫的升級你的 webpack了。
問題來了，如何能快速且平滑的升級你的 webpack呢？這是我們今天的重點，前面都是鋪墊，哈哈
升級webpack3
今天只以 vue項目來舉例， vue-cli升級 w3簡直不要太快哦，而且也有項目上線成功了，并且線上測試與本地測試結果基本一致。如果使用的是 react項目，用的又是腳手架的話，那么恭喜你，跟 vue-cli一樣快，可參考 vue-cli的升級方式，如果你自己寫的 w2的話加一個配置（可以體驗跟 vue-cli一樣的升級體驗哦），然后升級相應擴展：
new webpack.optimize.ModuleConcatenationPlugin()
如果是自己寫的 w1的話，對不起，你只能去哭著對比 w3和 w1的語法兼容修改配置文件了，網上有詳細的語法對比，這里就不詳述了
步驟
plugins:[ new webpack.optimize.ModuleConcatenationPlugin() ]
然后，就是辣么簡單，ok了
壯士，請留步。。。其實還有
每個人安裝過程中都可能遇到不同的錯，甚至是不顯示錯誤信息，讓人蛋疼又心碎，辣么如何進行科學的報錯呢？其實很簡單，如下
錯誤調試
在 build/webpack.dev.conf.js 里有自帶錯誤調試的插件
new webpack.HotModuleReplacementPlugin(), new FriendlyErrorsPlugin(
但它并不能滿足我們，我升級過程中就發(fā)現(xiàn)，很多bug只出現(xiàn)了個 error，不出現(xiàn)錯誤信息，這讓我如何調試啊，臣妾完全做不到啊
我們只需要修改一行配置：
new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsPlugin({
onErrors:function(severity,errors){
console.log(errors);
}
})
常見錯誤也就是 npm包版本不匹配，升級最新的包就行，推薦工具 npm-check，批量檢查更新，簡直不要太好用
不過凡事都有例外，錯誤也一樣，升級過程中遇到了如下錯誤：
翻墻搜了半天，發(fā)現(xiàn)是 "vue":"^2.3.4" 版本對應的 vue-loader版本不對，最好是 >vue-loader@^7.0.0&&<vue-loader@^12.0.0。
所以，剩下很大一部分錯誤就是框架和編譯器的版本對應問題的鍋了，多翻墻，多google，讓一切難題變得不難。
哈哈，有了這些就算再狡猾的妖精，也逃不過老孫的金箍棒了。
好了，請開始你的表演吧。
最后
贈送一份 package.json的配置，此配置乃最終兼容版，eslint好煩，我把它注釋了，目前已上線，運行良好
{
"name":"w3",
"version": "1.0.0",
"description":"w3",
"author": "yuanxiaolong",
"private":true,
"scripts":{
"dev":"node build/dev-server.js",
"start":"node build/dev-server.js",
"build":"node build/build.js",
"lint":"eslint --ext .js,.vue src"
},
"dependencies":{
"vue":"^2.0.0",
"vue-resource":"0.8.0",
"vue-router":"^2.0.0",
"vuex":"^2.0.0"
},
"devDependencies":{
"autoprefixer":"^7.1.2",
"babel-core":"^6.25.0",
"babel-loader":"^7.1.1",
"babel-plugin-component":"^0.10.0",
"babel-plugin-transform-class-constructor-call":
"^6.24.1",
"babel-plugin-transform-object-assign":"^6.22.0",
"babel-plugin-transform-runtime":"^6.23.0",
"babel-preset-es2015":"^6.24.1",
"babel-preset-stage-2":"^6.24.1",
"babel-register":"^6.24.1",
"chalk":"^2.1.0",
"connect-history-api-fallback":"^1.3.0",
"copy-webpack-plugin":"^4.0.1",
"css-loader":"^0.28.0",
"cssnano":"^3.10.0",
"eventsource-polyfill":"^0.9.6",
"express":"^4.14.1",
"extract-text-webpack-plugin":"^3.0.0",
"file-loader":"^0.11.1",
"friendly-errors-webpack-plugin":"^1.1.3",
"html-webpack-inline-source-plugin":"0.0.9",
"html-webpack-plugin":"^2.30.1",
"http-proxy-middleware":"^0.17.3",
"less":"^2.7.2",
"less-loader":"^4.0.5",
"opn":"^5.1.0",
"optimize-css-assets-webpack-plugin":"^2.0.0",
"ora":"^1.3.0",
"path":"^0.12.7",
"rimraf":"^2.6.1",
"semver":"^5.3.0",
"shelljs":"^0.7.8",
"uglifyjs-webpack-plugin":"^1.0.0-beta.2",
"url-loader":"^0.5.8",
"vue-loader":"^12.2.2",
"vue-style-loader":"^3.0.1",
"vue-template-compiler":"^2.4.2",
"webpack":"^3.5.3",
"webpack-bundle-analyzer":"^2.2.1",
"webpack-dev-middleware":"^1.12.0",
"webpack-hot-middleware":"^2.18.2",
"webpack-merge":"^4.1.0"
},
"engines":{
"node":">= 4.0.0",
"npm":">= 3.0.0"
},
"browserslist":[
"last 11 iOS versions"
]
}
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
