前言

成都創新互聯公司是專業的樂都網站建設公司，樂都接單;提供成都做網站、網站建設,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行樂都網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

伴隨著vue的全球化，已經各種vue的組件框架越來越完善，從早期的element-ui到vux，iview等越來越多高質量的項目，使用vue進行前端構建已然是一件工程化，模塊化，敏捷化的事情

在這其中，相信很多人都會選擇官方的vue-cli初始化工程模板，然后通過引入第三方組件框架和工具的方式進行開發構建，我個人也十分推崇這種做法。但是vue-cli初始化的項目模板畢竟是面向所有開發者的，在兼容性方面會有一定妥協。相信很多人都已經搜索過各類的webpack構建優化文章，但是很多不是版本太老就是不嚴謹

本文希望能在耗時優化與構建性能提升之間做一個平衡，即花最少的時間，對官方模板做最少的修改下，賺取大的構建性能提升

思路

早期版本的vue-cli和webpack2時代，網上流傳以下優化配置，但其實新版本的vue-cli和webpack3已經不需要

1. 使用ParallelUglifyPlugin替換UglifyPlugin（新版本的UglifyPlugin已經支持且默認開啟了多線程并行構建，所以此步驟沒有必要）
2. 啟用webpack3的Scope Hoisting（vue-cli新版本已經配置webapck3，且已經默認開啟此配置）
3. 善用alias（新版本vue-cli已經進行此項工作）
4. 配置CommonsChunkPlugin提取公用代碼（新版本vue-cli已經進行此項工作）

對于新版本的vue-cli和webpack3，以下簡單配置優化后可提升最少2倍的構建速度

1. 按需引用
2. 啟用happypack多核構建項目
3. 修改source-map配置
4. 啟用DllPlugin和DllReferencePlugin預編譯庫文件

實踐

1、按需引用

1.1幾乎所有的第三方組件框架都會提供組件的 按需引用 方式，以iview為例，通過借助插件babel-plugin-import 可以實現按需加載組件，減少文件體積，只需要修改 .babelrc 文件

npm install babel-plugin-import --save-dev

// .babelrc
{
 "plugins": [["import", {
 "libraryName": "iview",
 "libraryDirectory": "src/components"
 }]]
}

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前標題：詳解vue-cli之webpack3構建全面提速優化-創新互聯
分享網址：http://m.newbst.com/article6/hpcog.html

成都網站建設公司_創新互聯，為您提供域名注冊、網頁設計公司、營銷型網站建設、建站公司、用戶體驗、搜索引擎優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯