沐鳴主管:_使用webpack提升vue應用的4種方式
譯者注:本篇文章所提到的幾個措施大家可能都曾經在項目里用過,但是就如作者所言:你只是在用,並不知道為什麼用,本文最大的價值在於提供了系統的優化方案並解釋了原因
webpack是開發Vue單頁應用必不可少的工具,它能管理複雜的構建步驟,並且優化你的應用大小和性能, 使你的開發工作流更加簡單。
在這篇文章中,我將解釋使用webpack提升你的Vue應用的4種方式,包括:
-
單文件組件
-
優化Vue構建過程
-
瀏覽器緩存管理
-
代碼分離
關於vue-cli
如果你在使用 vue-cli 提供的模板來構建你的應用,那麼webpack的相關配置已經提供好了,這些配置已經經過很好地優化,我也給不了你其他的優化建議了。
不過因為配置是開箱即用的,所以你很有可能並不知道這些配置真正在做什麼,由於 vue-cli 里提供了我將要討論的優化措施,所以,你可以把這篇文章當做模板里webpack配置的概述。
1.單文件組件
Vue的特點之一就是使用了基於HTML的模板組件,這帶來了一個本質問題:要麼HTML標記使用醜陋的JavaScript字符串,要麼將模板內容和組件定義寫在不同的文件中。這帶來了一些困難。
Vue提供了一種叫做Single File Components(SFCs)的方式來解決這個問題,將模板、組件定義、CSS寫在一個 .vue 文件里。
MyComponent.vue
<template>
<div id=“my-component”>…</div>
</template>
<script>
export default {…}
</script>
<style>
#my–component {…}
</style>
Vue-loader 使得 SFCs成為可能,這個 webpack loader 將SFCs分隔成不同語言塊,然後輸出到合適的loader,例如 script塊 輸出到babel-loader, 模板塊輸出到Vue自己的vue-template-loader,該loader能夠將模板轉換成JavaScript的render函數。
vue-loader的最終輸出是一個將要包含在 Webpack bundle 中的JavaScript模塊。
典型的vue-loader配置如下所示:
module: {
rules: [
{
test: /\.vue$/,
loader: ‘vue-loader’,
options: {
loaders: {
// Override the default loaders
}
}
},
]
}
2.優化Vue構建
運行時構建
如果在你的應用中僅僅使用 render函數,不需要HTML模板,那你不需要使用Vue的模板編譯器,通過去掉模板編譯器,可以讓你在Webpack構建過程中,減少bundle 的體積。
記住單文件組件在開發模式中使用了預編譯
Vue的運行時構建版本包含了Vue的所有特點,除了模板編譯器,被稱為vue.runtime.js,體積比全功能版本小了20KB,所以這值得你嘗試一下。
默認情況下使用的是運行時構建版本,所以當你使用 import vue from ‘vue’ 來引用Vue的時候,你得到的是運行時構建版本,不過你能通過 alias 配置項來改變。
resolve: {
alias: {
‘vue$’: ‘vue/dist/vue.esm.js’ // Use the full build
}
}
譯者注:在Vue模塊中包含8個文件,各文件的區別可以參考:官方文檔,在需要使用完整版時使用了運行時版本會報warn:
You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
production環境中去掉 warn 和 error 信息
另外一個減少Vue構建體積的方式是在 production環境中去掉所有 error 和 warn信息,這些不必要的代碼導致你打包后的體積膨脹,而且增加了運行時耗時,你最好避免這些消耗。
如果你調試Vue的源代碼,你會發現這些提示信息都是通過環境變量 process.env.NODE_ENV 的值來判斷的,例如:
if (process.env.NODE_ENV !== ‘production’) {
warn((“Error in “ + info + “: \”” + (err.toString()) + “\””), vm);
}
如果 process.env.NODE_ENV 的值設置成 production ,那麼提示信息在構架過程中就會自動被剔出去。
可以通過使用 DefinePlugin 去設置 process.env.NODE_ENV 的值,同時使用 UglifyJsPlugin 去減小代碼體積並且去掉不需要的代碼塊。
if (process.env.NODE_ENV === ‘production’) {
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
‘process.env’: {
NODE_ENV: ‘”production”‘
}
}),
new webpack.optimize.UglifyJsPlugin()
])
}
譯者注:實際項目中使用的更多的方式是 production環境 和 其他環境 使用不同的webpack配置文件.
3.瀏覽器緩存管理
瀏覽器能夠緩存你的站點文件,只有在你本地沒有副本時或者副本已經過期時才會重新下載。
如果你所有的代碼都在一個文件里,那一個微小的改動也會導致整個文件的下載,理想情況下,你想要你的用戶盡可能少的下載文件,所以將頻繁改動的代碼和不怎麼改動的代碼分開是非常明智的。
Vendor file
Common Chunks插件能把你的Vendor代碼(例如Vue.js這些不會經常改動的依賴包)和應用代碼(每次開發過程中都會改動的代碼)分離開。
你能配置插件檢查一個依賴是否來自於node_modules,如果是,那就打包到vendor.js 文件。
new webpack.optimize.CommonsChunkPlugin({
name: ‘vendor’,
minChunks: function (module) {
return module.context && module.context.indexOf(‘node_modules’) !== –1;
}
})
這麼做之後,在構建后的輸出文件中,將有兩個獨立的文件,能夠分別被瀏覽器緩存。
<script src=“vendor.js” charset=“utf-8”></script>
<script src=“app.js” charset=“utf-8”></script>
指紋
當構建后的文件改動了,我們該怎麼丟棄緩存呢?
默認情況下,只有當一個緩存文件過期,或者用戶手動清除緩存,瀏覽器才會重新從服務器請求文件,如果服務器提示文件已經改動,那文件才會重新被下載(如果返回304則不會)。
為了避免不必要的請求,我們可以在每次文件內容改動時,改變文件的名字,從而強制瀏覽器重新下載,通過在文件名稱後面添加一個”指紋”:hash,我們可以非常容易達到這個目的。
Common Chunks插件生成”chunkhash”,能隨着文件的改動而更新,Webpack能在輸出時,將這個hash值添加到文件名稱末尾。
output: {
filename: ‘[name].[chunkhash].js’
},
這樣做的話,你會發現輸出的文件名稱類似於app.3b80b7c17398c31e4705.js。
譯者注:chunkhash並不需要Common Chunks生成,而是webpack自動生成的,而且據官方文檔,Common Chunks是無法生成chunkhash的,作者在這裏這麼寫讓我摸不着頭腦, 另外,還有一種添加hash值的方式是使用
output: {
filename: ‘[name].[hash].js’
},
其中的區別主要在於chunkhash是基於內容生成的hash值,而hash值是基於模塊標識(webpack打包時每個模塊都有一個唯一標識),hash值的主要問題在於任何一個文件更新之後都會更新hash值,導致那些內容沒有更新的文件的文件名也更新了,需要重新下載。具體區別可參考:webpack配置:緩存。
自動插入構建文件
當然了,增加了hash值之後,你就必須要在index文件里更新你的引用,否則瀏覽器是不會知道的。
<script src=“app.3b80b7c17398c31e4705.js”></script>
手動去做這件事將是一件非常沉悶無聊的事情,可以使用HTML Webpack Plugin來做這件事。這個插件能在構建過程中自動在你的HTML文件里插入對構建文件的引用。
先來把構建文件中的引用去掉
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>test-6</title>
</head>
<body>
<div id=“app”></div>
<!— built files should go here, but will be auto injected —>
</body>
</html>
然後在Webpack配置里增加HTML Webpack Plugin 的配置。
new HtmlWebpackPlugin({
filename: ‘index.html’
template: ‘index.html’,
inject: true,
chunksSortMode: ‘dependency’
})
現在帶有hash值的構建文件將會自動增加到index文件,同時,你的index.html文件也會被包含在輸出文件里,所以你可能需要將這一點告訴服務器。
4.代碼分離
默認情況下,Webpack將把你的所有應用代碼輸出到一個大的構建文件中,但是如果你有多個頁面,分隔代碼將每個獨立的頁面輸出到不同的文件中,只有在需要的時候才去加載。
Webpack有個功能 “code splitting”,可以用來做這件事,在Vue.js中需要使用async components,配合Vue Router使用更簡單。
Async componets
相比以一個定義對象作為第二個參數,Async components第二個參數是一個Promise函數,該函數將一個對象resolve,例如:
Vue.component(‘async-component’, function (resolve, reject) {
setTimeout(() => {
resolve({
// Component definition including props, methods etc.
});
}, 1000)
})
Vue只有在這個組件需要被渲染時,才會調用這個函數,同時也會為以後的預渲染緩存返回結果。
如果我們將每個頁面都當做一個組件,並且將定義對象放在服務器端,那在代碼分離的路上,我們已經走了一半了。
require
為了從服務器上加載你的異步組件代碼。使用Webpack的require語法,這將通知Webpack將async-component打包到一個分隔的bundle,更妙的是,Webpack將使用AJAX處理bundle的加載,所以你的代碼可以像下面這樣簡單:
Vue.component(‘async-component’, function (resolve) {
require([‘./AsyncComponent.vue’], resolve)
});
懶加載
在Vue.js應用中,vue-router是一個典型模塊,你可以用它來將SPA轉換成多頁應用,懶加載是利用Vue和Webpack實現代碼分離的官方推薦方式。
const HomePage = resolve => require([‘./HomePage.vue’], resolve);
const rounter = new VueRouter({
routes: [
{
path: ‘/’,
name: ‘HomePage’,
component: HomePage
}
]
})