怎麼提速優化vue-cli的程式碼
- php中世界最好的语言原創
- 2018-04-13 15:49:331934瀏覽
這次帶給大家怎麼提速優化vue-cli的程式碼，提速優化vue-cli程式碼的注意事項有哪些，下面就是實戰案例，一起來看一下。
前言
伴隨著vue的全球化，已經各種vue的組件框架越來越完善，從早期的element-ui到vux，iview等越來越多高質量的項目，使用vue進行前端構建已然是一件工程化，模組化，敏捷化的事情
在這其中，相信很多人都會選擇官方的vue-cli初始化工程模板，然後透過引入第三方組件框架和工具的方式進行開發構建，我個人也十分推崇這種做法。但vue-cli初始化的專案範本畢竟是針對所有開發者的，在相容性方面會有一定妥協。相信很多人都已經搜尋過各類的webpack構建優化文章，但是很多不是版本太老就是不嚴謹
# 本文希望能在耗時優化與建置效能提升之間做一個平衡，也就是花最少的時間，對官方模板做最少的修改下，賺取最大的建置效能提升
思路
早期版本的vue-cli和webpack2時代，網路上流傳以下優化配置，但其實新版本的vue-cli和webpack3已經不需要
使用ParallelUglifyPlugin替換UglifyPlugin（新版本的UglifyPlugin已經支援且預設開啟了多執行緒並行構建，所以此步驟沒有必要）
- 啟用webpack3的Scope Hoisting（vue-cli新版本已經配置webapck3，已經配置webpack3的Scope Hoisting（vue-cli新版本並且已經預設開啟此設定）
- 善用alias（新版本vue-cli已經進行此項目工作）
- 設定CommonsChunkPlugin提取公用程式碼（新版本vue-cli已經進行此項目工作）
# 對於新版本的vue-cli和webpack3，以下簡單設定最佳化後可提升最少2倍的建置速度
按需引用
- 啟用happypack多核心建置專案
- 修改source-map設定 ##啟用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引入（必須先引入）
<script src="/static/js/vendor.dll.js"></script>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會將這一切變得簡單，然而它並沒有，不過既然暫時沒有辦法去改變，那我們能做的就是，盡可能理解其中原理，盡自己最大的可能去簡化/優化
##相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
###########################)以上是怎麼提速優化vue-cli的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！