前言

由于 webpack3升級(jí)后，新增了 Scope Hositing（作用域提升） 功能，據(jù)說(shuō)是對(duì) js的性能提升很大。因此，我們做了一個(gè)測(cè)試對(duì)比，就是 webpack3和 webpack1/2 的性能對(duì)比，如下：

測(cè)試目標(biāo)

以下數(shù)據(jù)是2天隨機(jī)時(shí)段3部手機(jī)各2組數(shù)據(jù)，每組數(shù)據(jù)都是30次取平均值，為了測(cè)試js的解析能力，排除了網(wǎng)絡(luò)請(qǐng)求的影響

平臺(tái)：M5 Note Build/MRA58K

系統(tǒng)：android 6.0

平均提升：42.55%

平臺(tái)：MI 3C Build/KTU84P

系統(tǒng)：Android 4.4.4

平均提升：42.74%

平臺(tái)：SM901 Build/MXB48T

系統(tǒng)：Android 6.0.1

平均提升：32.75%

以上數(shù)據(jù)，提升比例雖然有所差距，但是，最后的結(jié)果，都表明......你應(yīng)該毫不猶豫的升級(jí)你的 webpack了。

問(wèn)題來(lái)了，如何能快速且平滑的升級(jí)你的 webpack呢？這是我們今天的重點(diǎn)，前面都是鋪墊，哈哈

升級(jí)webpack3

今天只以 vue項(xiàng)目來(lái)舉例， vue-cli升級(jí) w3簡(jiǎn)直不要太快哦，而且也有項(xiàng)目上線成功了，并且線上測(cè)試與本地測(cè)試結(jié)果基本一致。如果使用的是 react項(xiàng)目，用的又是腳手架的話，那么恭喜你，跟 vue-cli一樣快，可參考 vue-cli的升級(jí)方式，如果你自己寫(xiě)的 w2的話加一個(gè)配置（可以體驗(yàn)跟 vue-cli一樣的升級(jí)體驗(yàn)哦），然后升級(jí)相應(yīng)擴(kuò)展：

new webpack.optimize.ModuleConcatenationPlugin()

如果是自己寫(xiě)的 w1的話，對(duì)不起，你只能去哭著對(duì)比 w3和 w1的語(yǔ)法兼容修改配置文件了，網(wǎng)上有詳細(xì)的語(yǔ)法對(duì)比，這里就不詳述了

步驟

• 下載最新的的 vue-cli，初始化一個(gè)新項(xiàng)目 tow3
• 把你的 src 目錄下的業(yè)務(wù)代碼拷貝到新建的 tow3 項(xiàng)目中 src 路徑替換了
• 把 config/index.js 更細(xì)成你自己項(xiàng)目的，這里需要注意的是， webpack3此文件的配置和 webpack1、2都不太一樣，所以仔細(xì)比對(duì)，只修改一樣的配置項(xiàng)
• 在 build/webpack.prod.conf.js 配置里文件里的加上如下配置，這是 webpack3升級(jí)的最核心功能(加在這個(gè)文件時(shí)因?yàn)槲疑a(chǎn)環(huán)境不需要)，如果本身打包策略做了優(yōu)化，那么就需要對(duì)造 webpack3的最新語(yǔ)法進(jìn)行修改遷移了

plugins:[ 
 new webpack.optimize.ModuleConcatenationPlugin()
 ]

• npm run dev & npm run build 缺什么包就裝什么包，如圖

然后，就是辣么簡(jiǎn)單，ok了

壯士，請(qǐng)留步。。。其實(shí)還有

每個(gè)人安裝過(guò)程中都可能遇到不同的錯(cuò)，甚至是不顯示錯(cuò)誤信息，讓人蛋疼又心碎，辣么如何進(jìn)行科學(xué)的報(bào)錯(cuò)呢？其實(shí)很簡(jiǎn)單，如下

錯(cuò)誤調(diào)試

在 build/webpack.dev.conf.js 里有自帶錯(cuò)誤調(diào)試的插件

new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsPlugin(

但它并不能滿足我們，我升級(jí)過(guò)程中就發(fā)現(xiàn)，很多bug只出現(xiàn)了個(gè) error，不出現(xiàn)錯(cuò)誤信息，這讓我如何調(diào)試啊，臣妾完全做不到啊

我們只需要修改一行配置：

new webpack.HotModuleReplacementPlugin(),
new FriendlyErrorsPlugin({
 onErrors:function(severity,errors){
 console.log(errors);
 }
 })

 常見(jiàn)錯(cuò)誤也就是 npm包版本不匹配，升級(jí)最新的包就行，推薦工具 npm-check，批量檢查更新，簡(jiǎn)直不要太好用

不過(guò)凡事都有例外，錯(cuò)誤也一樣，升級(jí)過(guò)程中遇到了如下錯(cuò)誤：

 翻墻搜了半天，發(fā)現(xiàn)是 "vue":"^2.3.4" 版本對(duì)應(yīng)的 vue-loader版本不對(duì)，最好是 >vue-loader@^7.0.0&&<vue-loader@^12.0.0。
所以，剩下很大一部分錯(cuò)誤就是框架和編譯器的版本對(duì)應(yīng)問(wèn)題的鍋了，多翻墻，多google，讓一切難題變得不難。

哈哈，有了這些就算再狡猾的妖精，也逃不過(guò)老孫的金箍棒了。

好了，請(qǐng)開(kāi)始你的表演吧。

最后

贈(zèng)送一份 package.json的配置，此配置乃最終兼容版，eslint好煩，我把它注釋了，目前已上線，運(yùn)行良好

{
 "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"
 ]
}

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論