Webpack是開(kāi)發(fā)Vue.js單頁(yè)應(yīng)用程序的重要工具。 通過(guò)管理復(fù)雜的構(gòu)建步驟，你可以更輕松地開(kāi)發(fā)工作流程，并優(yōu)化應(yīng)用程序的大小和性能。
其中介紹下面四種方式：
1.單個(gè)文件組件
Vue的特殊功能之一是使用HTML作為組件模板。 盡管如此，它們還有一個(gè)內(nèi)在的問(wèn)題：你的HTML標(biāo)記需要是一個(gè)尷尬的JavaScript字符串，
否則你的模板和組件定義將需要在單獨(dú)的文件中，使其難以使用。
Vue有一個(gè)優(yōu)雅的解決方案，稱(chēng)為單文件組件（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除了模板編譯器（稱(chēng)為vue.runtime.js）之外的所有功能。 它比完整版小約20KB，所以值得使用，如果可以的話(huà)。
默認(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. 瀏覽器緩存管理
用戶(hù)的瀏覽器將緩存你的站點(diǎn)的文件
如果所有的代碼都在一個(gè)文件中，那么一個(gè)微小的變化將意味著整個(gè)文件將需要重新下載。
理想情況下，你希望用戶(hù)盡可能少的下載，因此在你的應(yīng)用程序中將很少更改的代碼和頻繁更改的代碼分開(kāi)處理會(huì)更好
3.1 Vendor 文件
這個(gè)Common Chunks插件可以從你的應(yīng)用程序代碼（可能在每個(gè)部署中更改的代碼）解耦你的vendor 代碼（例如，Vue.js庫(kù)）。
你可以查看依賴(lài)項(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)用戶(hù)手動(dòng)清除緩存時(shí)，瀏覽器將再次從服務(wù)器請(qǐng)求該文件。 如果服務(wù)器指示文件已更改，則文件將被重新下載（否則服務(wù)器返回HTTP 304未修改）。
為了保存不必要的服務(wù)器請(qǐng)求，我們可以在每次內(nèi)容更改時(shí)更改文件的名稱(chēng)，以強(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這樣的名稱(chēng)。
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)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
