使用Webpack提高Vue.js應(yīng)用的方式匯總(四種)

發(fā)布時(shí)間：2020-10-26 09:36:34 來(lái)源：腳本之家閱讀：193 作者：Jimmy-Lee 欄目：web開(kāi)發(fā)

Webpack是開(kāi)發(fā)Vue.js單頁(yè)應(yīng)用程序的重要工具。通過(guò)管理復(fù)雜的構(gòu)建步驟，你可以更輕松地開(kāi)發(fā)工作流程，并優(yōu)化應(yīng)用程序的大小和性能。

　　其中介紹下面四種方式：

單個(gè)文件組件
優(yōu)化Vue構(gòu)建
瀏覽器緩存管理
代碼分割

　　1.單個(gè)文件組件　　　　

　　　　Vue的特殊功能之一是使用HTML作為組件模板。盡管如此，它們還有一個(gè)內(nèi)在的問(wèn)題：你的HTML標(biāo)記需要是一個(gè)尷尬的JavaScript字符串，

　　否則你的模板和組件定義將需要在單獨(dú)的文件中，使其難以使用。

　　Vue有一個(gè)優(yōu)雅的解決方案，稱為單文件組件（SFC），其中包括模板，組件定義和CSS全部在一個(gè)整齊的.vue文件中：

　　如下模塊mycomponent.vue(html +js +css)

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

　　SFC通過(guò)vue-loader Webpack插件實(shí)現(xiàn)。這個(gè)裝載器將SFC的語(yǔ)言塊和管道分成一個(gè)適當(dāng)?shù)难b載器，例如腳本塊轉(zhuǎn)到babel-loader，而模板塊轉(zhuǎn)到Vue自己的vue-template-loader，

　　將模板轉(zhuǎn)換為JavaScript渲染功能。

　　vue-loader的最終輸出是一個(gè)可以包含在Webpack包中的JavaScript模塊。

　　vue-loader的典型配置如下：(webpack.base.conf.js)　　

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

　2. 優(yōu)化Vue構(gòu)建--運(yùn)行時(shí)版本構(gòu)建　　

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

　　*記住，單個(gè)文件組件模板是在開(kāi)發(fā)中預(yù)編譯的，以渲染功能！

　　Vue.js庫(kù)中只有一個(gè)運(yùn)行時(shí)版本的構(gòu)建，其中包含Vue.js除了模板編譯器（稱為vue.runtime.js）之外的所有功能。它比完整版小約20KB，所以值得使用，如果可以的話。

　　默認(rèn)情況下使用運(yùn)行時(shí)版本，因此每次使用“vue”的import vue 來(lái)引入需要的文件;

　　通過(guò)起別名來(lái)簡(jiǎn)化文件中繁瑣的路徑引用：(webpack.base.conf.js)

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

　　　剝離生產(chǎn)中的警告和錯(cuò)誤消息

　　減少Vue.js構(gòu)建大小的另一種方法是刪除生產(chǎn)中的任何錯(cuò)誤消息和警告。去掉不必要的代碼減少輸出捆綁包大小

　　我們可以這樣設(shè)置：只在生產(chǎn)環(huán)境中添加這些警告

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

　　如果process.env.NODE_ENV設(shè)置為生產(chǎn)，那么在構(gòu)建過(guò)程中，這些警告塊可以通過(guò)分解器自動(dòng)從代碼中刪除。

　　你可以使用DefinePlugin設(shè)置process.env.NODE_ENV的值，并使用UglifyJsPlugin來(lái)縮小代碼并將未使用的塊刪除：

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. 瀏覽器緩存管理

　　用戶的瀏覽器將緩存你的站點(diǎn)的文件

如果所有的代碼都在一個(gè)文件中，那么一個(gè)微小的變化將意味著整個(gè)文件將需要重新下載。

理想情況下，你希望用戶盡可能少的下載，因此在你的應(yīng)用程序中將很少更改的代碼和頻繁更改的代碼分開(kāi)處理會(huì)更好

　3.1 Vendor 文件

　　這個(gè)Common Chunks插件可以從你的應(yīng)用程序代碼（可能在每個(gè)部署中更改的代碼）解耦你的vendor 代碼（例如，Vue.js庫(kù)）。

　　你可以查看依賴項(xiàng)是否來(lái)自node_modules文件夾，如果是，則將其輸出到單獨(dú)的文件vendor.js中：

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

　　最后在構(gòu)建輸出中有兩個(gè)單獨(dú)的文件，這些文件將由瀏覽器獨(dú)立緩存：

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

　3.2 Fingerprinting

　　　　構(gòu)建文件發(fā)生變化時(shí)，我們?nèi)绾涡薷臑g覽器的緩存？

　　默認(rèn)情況下，只有當(dāng)緩存文件過(guò)期時(shí)，或者當(dāng)用戶手動(dòng)清除緩存時(shí)，瀏覽器將再次從服務(wù)器請(qǐng)求該文件。如果服務(wù)器指示文件已更改，則文件將被重新下載（否則服務(wù)器返回HTTP 304未修改）。

　　為了保存不必要的服務(wù)器請(qǐng)求，我們可以在每次內(nèi)容更改時(shí)更改文件的名稱，以強(qiáng)制瀏覽器重新下載。這樣做的一個(gè)簡(jiǎn)單系統(tǒng)是通過(guò)附加一個(gè)哈希來(lái)為文件名添加一個(gè)“fingerprint”，例如：

使用Webpack提高Vue.js應(yīng)用的方式匯總(四種)

　　Common Chunks插件發(fā)出一個(gè)“chunkhash”，如果文件的內(nèi)容已經(jīng)更改，它將被更新。當(dāng)它們輸出時(shí)，Webpack可以將這個(gè)哈希追加到文件名中：

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

　　當(dāng)你這樣做時(shí)，你會(huì)看到你輸出的文件將具有像app.3b80b7c17398c31e4705.js這樣的名稱。

　3.3 自動(dòng)注入構(gòu)建文件

　　　　當(dāng)然，如果你添加一個(gè)哈希，你必須更新索引文件中的文件的引用，否則瀏覽器將不會(huì)知道它：

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

　　這將是一個(gè)非常繁瑣的工作，手動(dòng)執(zhí)行，所以使用HTML Webpack插件為你做。該插件可以在捆綁過(guò)程中自動(dòng)將構(gòu)建文件的引用注入到HTML文件中。

　　首先刪除對(duì)構(gòu)建文件的引用：(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>

　　并將HTML Webpack Plugin添加到Webpack config中：

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

　　這樣配置完成之后在index.html中就會(huì)自動(dòng)引用構(gòu)建的文件

4.代碼分割

　　　　默認(rèn)情況下，Webpack會(huì)將你的所有應(yīng)用程序代碼輸出為一個(gè)大捆綁文件。但是，如果你的應(yīng)用程序有多個(gè)頁(yè)面，則使用分割代碼將更有效，

　　每個(gè)單獨(dú)的頁(yè)面代碼都在單獨(dú)的文件中，并且僅在需要時(shí)加載是更好的選擇。

　　Webpack有一個(gè)名為“代碼分割”的功能，正是這樣。在Vue.js中實(shí)現(xiàn)這一點(diǎn)也需要異步組件，并且通過(guò)Vue Router變得更加容易。

　　4.1 異步組件

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

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

　　當(dāng)組件實(shí)際需要呈現(xiàn)時(shí)，Vue將只調(diào)用該函數(shù)。它還將緩存未來(lái)重新渲染的結(jié)果。

　　如果我們構(gòu)建我們的應(yīng)用程序，因此每個(gè)“頁(yè)面”都是一個(gè)組件，并且我們將定義存儲(chǔ)在我們的服務(wù)器上，那么我們就是中斷實(shí)現(xiàn)代碼分割的途徑。

　　4.2 require要求

　　　　要從服務(wù)器加載異步組件的代碼，請(qǐng)使用Webpack require語(yǔ)法。這將指示W(wǎng)ebpack在構(gòu)建時(shí)將單獨(dú)的軟件包中的async組件捆綁在一起，

　　而且更好的是，Webpack將使用AJAX處理此捆綁包的加載，因此你的代碼可以簡(jiǎn)單如下：

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

　　4.3 懶加載 (router.js)

　　　　在路由配置文件中一般的都是直接導(dǎo)入比如　　

import HomePage from './HomePage '
　　如果想路由頁(yè)面只在用到時(shí)候加載可以修改如下

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

以上所述是小編給大家介紹的使用Webpack提高Vue.js應(yīng)用的方式匯總(四種)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

使用Webpack提高Vue.js應(yīng)用的方式匯總(四種)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽