在vue-cli中有關webpack3提速優化方面的問題

亚连
發布: 2018-06-15 16:44:43
原創
1440 人瀏覽過

這篇文章主要介紹了詳解vue-cli之webpack3構建全面提速優化,現在分享給大家,也給大家做個參考。

前言

伴隨著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" }]] }
登入後複製

1.2然後這樣按需引入元件,就可以減少體積了

import { Button } from 'iview' Vue.component('Table', Table)
登入後複製

2、啟用happypack多核心建置專案

安裝happypack後,修改/build/webpack.base.conf.js檔案即可

npm install happypack --save-dev // /build/webpack.base.conf.js const HappyPack = require('happypack') const os = require('os') const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }) // 增加HappyPack插件 plugins: [ new HappyPack({ id: 'happy-babel-js', loaders: ['babel-loader?cacheDirectory=true'], threadPool: happyThreadPool, }) ] // 修改引入loader { test: /\.js$/, // loader: 'babel-loader', loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader include: [resolve('src'), resolve('test')] }
登入後複製

3、修改source-map設定

3.1先修改/config/index.js 檔案

// /config/index.js dev环境:devtool: 'eval'(最快速度) prod环境:productionSourceMap: false(关闭source-map)
登入後複製

3.2然後修改/ src/main.js 文件,關閉生產環境的調試信息

// /src/main.js const isDebug_mode = process.env.NODE_ENV !== 'production' Vue.config.debug = isDebug_mode Vue.config.devtools = isDebug_mode Vue.config.productionTip = isDebug_mode
登入後複製

4、啟用DllPlugin和DllReferencePlugin預編譯庫文件

這是最複雜也是提升效果最明顯的一步,原理是將第三方函式庫檔案單獨編譯打包一次,以後的建置都不需要再編譯打包第三方函式庫

#4.1 增加build/webpack.dll.config.js 文件,並在其中配置需要單獨DLL化的模組

const path = require("path") const webpack = require("webpack") module.exports = { // 你想要打包的模块的数组 entry: { vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview'] }, output: { path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置 filename: '[name].dll.js', library: '[name]_library' }, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname, '.', '[name]-manifest.json'), name: '[name]_library', context: __dirname }), // 压缩打包的文件 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] }
登入後複製

4.2 在build/webpack.dev.conf.js 和build/webpack.prod.conf.js 增加以下插件

new webpack.DllReferencePlugin({ context: __dirname, manifest: require('./vendor-manifest.json') })
登入後複製

4.3 在/package. json 增加指令

"dll": "webpack --config ./build/webpack.dll.config.js"
登入後複製

4.4 在/index.html 增加DLL化JS引入(必須先引入)

登入後複製

4.5 執行建置

npm run dll(这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js) npm run dev 或 npm run build
登入後複製

後記

以上四個大步驟完成後,我們就完成了對vue-cli模板工程構建優化提升,雖然看起來依然算不上簡單,但是這已經是最最簡單的優化了,還有更多奇技淫巧沒有展開,因為我覺得過多的優化配置意義不大,反而會給項目工程帶來太多冗餘和復雜化

以上的配置實際測試的構建效果是從原先的13秒減少到了6秒左右,熱部署更是毫秒級的

最重要的是,最簡單化的配置,在未來vue-cli和webpack升級新版本後,也可以很容易的重新配置進去使用,熟練配置一次後,重新再還原配置只需要5分鐘左右想想花5分鐘修改一下配置,就能換來每次構建2倍以上速度的提升,是不是會有點小激動呢:)

這裡再多說些後話吧,其實webpack2至webpack3的升級,個人覺得蠻失望的,因為它還是沒有從根本上解決其配置過於復雜的問題,作為目標是佔領全世界所有web專案所建構的產品,它應該更多地從易用性/人性化的角度去考慮

每一次看著webpack的工程裡面的各種.babelrc,.postcssrc.js ……還有各種的.conf文件,甚至還有各種的main,index,app文件,就忍不住想吐槽,究竟為什麼前端的構建會發展成這樣,一個好好的項目工程裡,十幾種配置文件,真的有必要嗎?我原本以為webpack3會將這一切變得簡單,然而它並沒有,不過既然暫時沒有辦法去改變,那我們能做的就是,盡可能理解其中原理,盡自己最大的可能去簡化/優化

上面是我整理給大家的,希望未來會對大家有幫助。

相關文章:

使用js自訂trim函數刪除兩端空格

JavaScript運行原理

vue中全選與反選

詳解解說使用jest測試react native元件

在vue中全選實作數據的綁定及獲取

在mint-ui中使用時間外掛程式及取得選擇值

##VUE2實現二級省市聯動選擇

以上是在vue-cli中有關webpack3提速優化方面的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn