快速將Vue項目升級到webpack3的方法步驟
前言
由于 webpack3升級后,新增了 Scope Hositing(作用域提升) 功能,據(jù)說是對 js的性能提升很大。因此,我們做了一個測試對比,就是 webpack3和 webpack1/2 的性能對比,如下:
測試目標
以下數(shù)據(jù)是2天隨機時段3部手機各2組數(shù)據(jù),每組數(shù)據(jù)都是30次取平均值,為了測試js的解析能力,排除了網(wǎng)絡請求的影響
平臺: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ù)據(jù),提升比例雖然有所差距,但是,最后的結(jié)果,都表明......你應該毫不猶豫的升級你的 webpack了。
問題來了,如何能快速且平滑的升級你的 webpack呢?這是我們今天的重點,前面都是鋪墊,哈哈
升級webpack3
今天只以 vue項目來舉例, vue-cli升級 w3簡直不要太快哦,而且也有項目上線成功了,并且線上測試與本地測試結(jié)果基本一致。如果使用的是 react項目,用的又是腳手架的話,那么恭喜你,跟 vue-cli一樣快,可參考 vue-cli的升級方式,如果你自己寫的 w2的話加一個配置(可以體驗跟 vue-cli一樣的升級體驗哦),然后升級相應擴展:
new webpack.optimize.ModuleConcatenationPlugin()
如果是自己寫的 w1的話,對不起,你只能去哭著對比 w3和 w1的語法兼容修改配置文件了,網(wǎng)上有詳細的語法對比,這里就不詳述了
步驟
- 下載最新的的 vue-cli,初始化一個新項目 tow3
- 把你的 src 目錄下的業(yè)務代碼拷貝到新建的 tow3 項目中 src 路徑替換了
- 把 config/index.js 更細成你自己項目的,這里需要注意的是, webpack3此文件的配置和 webpack1、2都不太一樣,所以仔細比對,只修改一樣的配置項
- 在 build/webpack.prod.conf.js 配置里文件里的加上如下配置,這是 webpack3升級的最核心功能(加在這個文件時因為我生產(chǎn)環(huán)境不需要),如果本身打包策略做了優(yōu)化,那么就需要對造 webpack3的最新語法進行修改遷移了
plugins:[ new webpack.optimize.ModuleConcatenationPlugin() ]
- npm run dev & npm run build 缺什么包就裝什么包,如圖
然后,就是辣么簡單,ok了
壯士,請留步。。。其實還有
每個人安裝過程中都可能遇到不同的錯,甚至是不顯示錯誤信息,讓人蛋疼又心碎,辣么如何進行科學的報錯呢?其實很簡單,如下
錯誤調(diào)試
在 build/webpack.dev.conf.js 里有自帶錯誤調(diào)試的插件
new webpack.HotModuleReplacementPlugin(), new FriendlyErrorsPlugin(
但它并不能滿足我們,我升級過程中就發(fā)現(xiàn),很多bug只出現(xiàn)了個 error,不出現(xiàn)錯誤信息,這讓我如何調(diào)試啊,臣妾完全做不到啊
我們只需要修改一行配置:
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" ] }
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關文章
vueRouter--matcher之動態(tài)增減路由方式
這篇文章主要介紹了vueRouter--matcher之動態(tài)增減路由方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04vue input 輸入校驗字母數(shù)字組合且長度小于30的實現(xiàn)代碼
這篇文章主要介紹了vue input 校驗字母數(shù)字組合且長度小于30的實現(xiàn)代碼,文章給大家補充介紹了在Vue.Js下使用el-input框只能輸入數(shù)字并限制位數(shù)并且限制中文輸入以及粘貼功能,感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05Vue異步請求導致頁面數(shù)據(jù)渲染錯誤問題解決方法示例
這篇文章主要為大家介紹了Vue中異步請求導致頁面數(shù)據(jù)渲染錯誤問題解決方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09使用vite創(chuàng)建vue3之vite.config.js的配置方式
這篇文章主要介紹了使用vite創(chuàng)建vue3之vite.config.js的配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08