如何使用Webpack提升Vue.js應(yīng)用程序

這篇文章主要介紹如何使用Webpack提升Vue.js應(yīng)用程序，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

眾所周知，webpack 是 開發(fā) vue.js 單頁面應(yīng)用程序的必備工具，通過管理復(fù)雜的構(gòu)建步驟，它可以使您的開發(fā)工作流程更加簡(jiǎn)單，并且可以優(yōu)化應(yīng)用程序的大小和性能。

在本文中，我將解釋W(xué)ebpack增強(qiáng)Vue應(yīng)用程序的四種方法，包括：

• Single file components 單文件組件

• Optimising the Vue build

• Browser cache management

• Code splitting

關(guān)于 vue-cli

如果您使用模板從vue-cli構(gòu)建應(yīng)用程序，那么將提供預(yù)制的Webpack配置。它們已經(jīng)過優(yōu)化，沒有任何改進(jìn)建議！
但是，由于它們開箱即用的效果非常好，您可能對(duì)它們的實(shí)際功能并不太了解，對(duì)嗎？
考慮一下本文，對(duì)vue-cli模板中使用的Webpack配置進(jìn)行概述，因?yàn)樗鼈儼宋以谶@里討論的相同優(yōu)化。

1. Single file components

Vue的特有功能之一是將HTML用于組件模板。但是，這些帶有一個(gè)固有的問題：要么您的HTML標(biāo)記需要使用笨拙的JavaScript字符串，要么您的模板和組件定義必須位于單獨(dú)的文件中，從而使其難以使用。

Vue有一個(gè)優(yōu)雅的解決方案，稱為“單個(gè)文件組件（SFC）”，該文件將模板，組件定義和CSS都包含在一個(gè)簡(jiǎn)單的.vue文件中：

<template>
 <div id="my-component">...</div>
</template>
<script>
 export default {...}
</script>
<style>
 #my-component {...}
</style>

vue-loader Webpack插件使SFC成為可能。該加載器拆分SFC語言塊并將每個(gè)管道通過管道傳輸?shù)竭m當(dāng)?shù)募虞d器，例如腳本塊轉(zhuǎn)到babel-loader，而模板塊轉(zhuǎn)到Vue自己的vue-template-loader，后者將模板轉(zhuǎn)換為JavaScript渲染函數(shù)。
vue-loader的最終輸出是一個(gè)JavaScript模塊，準(zhǔn)備將其包含在Webpack捆綁包中。

vue-loader的典型配置如下：

module: {
 rules: [
  {
   test: /\.vue$/,
   loader: 'vue-loader',
   options: {
    loaders: {
     // Override the default loaders
    }
   }
  },
 ]
}

2. Optimising the Vue build

如果僅在Vue應(yīng)用程序*中使用渲染功能，而沒有HTML模板，則不需要Vue的模板編譯器。您可以通過從Webpack構(gòu)建中省略編譯器來減小捆綁包的大小。

請(qǐng)記住，單個(gè)文件組件模板已在開發(fā)中預(yù)編譯以呈現(xiàn)功能！

Vue.js庫只有運(yùn)行時(shí)版本，其中包含Vue.js的所有功能，但模板編譯器稱為vue.runtime.js。它比完整版本小20KB，因此如果可以的話值得使用。

默認(rèn)情況下，僅使用運(yùn)行時(shí)構(gòu)建，因此，每次使用 import vue from 'vue' 時(shí)，都將使用它。在您的項(xiàng)目中，這就是您所得到的。但是，您可以使用alias 別名配置選項(xiàng)更改為其他版本：

resolve: {
 alias: {
  'vue$': 'vue/dist/vue.esm.js' // Use the full build
 }
},

Stripping out warnings and error messages in production

減小Vue.js構(gòu)建大小的另一種方法是刪除生產(chǎn)中的任何錯(cuò)誤消息和警告。這些使用不必要的代碼使輸出包大小膨脹，并且還導(dǎo)致您最好避免運(yùn)行時(shí)開銷

如果您檢查Vue源代碼，則會(huì)看到警告塊取決于環(huán)境變量process.env.NODE_ENV的值，例如：

if (process.env.NODE_ENV !== 'production') {
 warn(("Error in " + info + ": \"" + (err.toString()) + "\""), vm);
}

如果將process.env.NODE_ENV設(shè)置為生產(chǎn)，那么在構(gòu)建過程中，minifier可以自動(dòng)將此類警告塊從代碼中剝離。

您可以使用DefinePlugin來設(shè)置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()
 ])
}

3. Browser cache management

用戶的瀏覽器將緩存您網(wǎng)站的文件，以便僅在該瀏覽器尚無本地副本或本地副本已過期時(shí)才下載。

如果您所有的代碼都在一個(gè)文件中，那么進(jìn)行微小的更改就意味著需要重新下載整個(gè)文件。

理想情況下，您希望用戶下載得盡可能少，因此將應(yīng)用程序很少更改的代碼與頻繁更改的代碼分開是明智的。

Vendor file

Common Chunks插件可以將您的 vendor 代碼（例如，不太可能經(jīng)常更改的Vue.js庫之類的依賴項(xiàng)）與您的應(yīng)用程序代碼（每次部署可能更改的代碼）分離。

您可以配置插件以檢查依賴項(xiàng)是否來自node_modules文件夾，如果是，則將其輸出到單獨(dú)的文件vendor.js中：

new webpack.optimize.CommonsChunkPlugin({
 name: 'vendor',
 minChunks: function (module) {
  return module.context && module.context.indexOf('node_modules') !== -1;
 }
})

如果這樣做，您現(xiàn)在在構(gòu)建輸出中將有兩個(gè)單獨(dú)的文件，這些文件將由瀏覽器獨(dú)立緩存：

<script src="vendor.js" charset="utf-8"></script>
<script src="app.js" charset="utf-8"></script>

Fingerprinting

當(dāng)構(gòu)建文件更改時(shí)，我們?nèi)绾纹茐臑g覽器的緩存？

默認(rèn)情況下，僅當(dāng)緩存的文件到期時(shí)，或者當(dāng)用戶手動(dòng)清除緩存時(shí)，瀏覽器才會(huì)再次從服務(wù)器請(qǐng)求文件。

如果服務(wù)器指示文件已更改，則將重新下載該文件（否則服務(wù)器返回HTTP 304 Not Modified）。

為了節(jié)省不必要的服務(wù)器請(qǐng)求，我們可以在每次文件內(nèi)容更改時(shí)更改其名稱，以強(qiáng)制瀏覽器重新下載該文件。一個(gè)簡(jiǎn)單的系統(tǒng)可以通過在文件名后附加一個(gè)哈希來為文件名添加“指紋”：

Common Chunks插件會(huì)發(fā)出“ chunkhash”，如果文件內(nèi)容已更改，則將對(duì)其進(jìn)行更新。 Webpack可以在輸出文件名時(shí)將此哈希附加到文件名中：

output: {
 filename: '[name].[chunkhash].js'
},

執(zhí)行此操作時(shí)，您將看到輸出的文件將具有類似app.3b80b7c17398c31e4705.js的名稱。

Auto inject build files

當(dāng)然，如果添加哈希，則必須更新索引文件中對(duì)該文件的引用，否則瀏覽器將不知道該哈希：

<script src="app.3b80b7c17398c31e4705.js"></script>

手動(dòng)完成這項(xiàng)工作非常繁瑣，因此請(qǐng)使用HTML Webpack插件為您完成。該插件可以在捆綁過程中自動(dòng)將對(duì)構(gòu)建文件的引用注入到HTML文件中。

首先刪除對(duì)構(gòu)建文件的引用：

<!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>

并將HTML Webpack插件添加到您的Webpack配置中：

new HtmlWebpackPlugin({
 filename: 'index.html'
 template: 'index.html',
 inject: true,
 chunksSortMode: 'dependency'
}),

現(xiàn)在，帶有哈希的構(gòu)建文件將自動(dòng)添加到索引文件中。另外，您的index.html文件現(xiàn)在將包含在捆綁輸出中，因此您可能需要告訴Web服務(wù)器其位置已更改

4. Code splitting

默認(rèn)情況下，Webpack會(huì)將所有應(yīng)用程序代碼輸出到一個(gè)大捆綁包中。但是，如果您的應(yīng)用有多個(gè)頁面，則拆分代碼會(huì)更有效，因此每個(gè)單獨(dú)的頁面代碼都位于單獨(dú)的文件中，并且僅在需要時(shí)才加載
Webpack具有一項(xiàng)稱為“代碼拆分”的功能。在Vue.js中實(shí)現(xiàn)此功能還需要異步組件，并且通過Vue Router變得更加容易。

Async components

異步組件沒有將定義對(duì)象作為第二個(gè)參數(shù)，而是具有一個(gè)Promise函數(shù)來解析該定義對(duì)象，例如：

Vue.component('async-component', function (resolve, reject) {
 setTimeout(() => {
  resolve({
   // Component definition including props, methods etc.
  });
 }, 1000)
})

Vue僅在組件實(shí)際需要渲染時(shí)才調(diào)用該函數(shù)。它還會(huì)緩存結(jié)果以供將來重新渲染。
如果我們?cè)O(shè)計(jì)應(yīng)用程序，使每個(gè)“頁面”都是一個(gè)組件，并且將定義存儲(chǔ)在服務(wù)器上，那么我們就完成了代碼拆分的一半。

require

要從服務(wù)器加載異步組件的代碼，請(qǐng)使用Webpack require語法
這將指示W(wǎng)ebpack在構(gòu)建時(shí)將async-component捆綁在一個(gè)單獨(dú)的bundle中，更好的是，Webpack將使用AJAX處理此bundle的加載，因此您的代碼可以像這樣簡(jiǎn)單：

Vue.component('async-component', function (resolve) {
 require(['./AsyncComponent.vue'], resolve)
});

Lazy loading

在Vue.js應(yīng)用程序中，vue-router通常是您用于將SPA組織到多個(gè)頁面中的模塊。延遲加載是使用Vue和Webpack實(shí)現(xiàn)代碼拆分的一種形式化方法。

const HomePage = resolve => require(['./HomePage.vue'], resolve);const rounter = new VueRouter({ routes: [  {   path: '/',   name: 'HomePage',   component: HomePage  } ]})

以上是“如何使用Webpack提升Vue.js應(yīng)用程序”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！