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

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括高密網(wǎng)站建設(shè)、高密網(wǎng)站制作、高密網(wǎng)頁(yè)制作以及高密網(wǎng)絡(luò)營(yíng)銷(xiāo)策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，高密網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到高密省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

其中介紹下面四種方式：

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

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)

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ú)立緩存：

　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”，例如：

 　　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ì)知道它：

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

首先刪除對(duì)構(gòu)建文件的引用：(index.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ì)創(chuàng)新互聯(lián)網(wǎng)站的支持！