Webpack是開發(fā)Vue.js單頁面應(yīng)用(SPA)最基本的工具。通過管理負(fù)責(zé)的構(gòu)建步驟能夠使開發(fā)工作流非常的簡單，同時(shí)也能夠優(yōu)化應(yīng)用的大小提升應(yīng)用的性能。

在這篇文章我將為大家展示W(wǎng)ebpack是如何應(yīng)用在Vue app中的，包括

1. 單文件組件

2. 優(yōu)化Vue項(xiàng)目的構(gòu)建

3. 瀏覽器緩存管理

4. 代碼分割

關(guān)于Vue-cli

如果你是使用vue-cli創(chuàng)建的項(xiàng)目整體框架，那么默認(rèn)就提供了Webpack的配置文件。Webpack已經(jīng)很好的集成到你的項(xiàng)目中了，我也沒有更進(jìn)一步提升的優(yōu)化的建議可以提供！

那么既然提供了一個(gè)開箱即用的工具，你可能對到底是如何運(yùn)行工作的不是很了解，對嗎？在本篇文章我們將討論與vue-cli提供的默認(rèn)配置類似的功能。

1.單文件組件

Vue一個(gè)非常明顯的特點(diǎn)是它使用HTML作為組件的模板。這也就必然伴隨著一個(gè)一直存在的問題，不管是你將組件模板的HTML標(biāo)記比較笨拙的放置于JavaScript字符串中，還是將模板和組件的定義放置于單獨(dú)的文件中，管理起來都比較麻煩。

Vue提供了一個(gè)非常棒的解決方案單文件組件(Single File Components SFCs)，單文件組件將模板，組件定義以及CSS都統(tǒng)一整齊的放置在一個(gè).vue文件內(nèi)。

...

通過Webpack的vue-loader插件，我們可以在項(xiàng)目中靈活的使用SFCs。這個(gè)插件會將SFCs的模板、組件定義以及樣式進(jìn)行拆分成塊并傳輸給特定的Webpack loader進(jìn)行后續(xù)處理，例如：script塊將交給`bable-loader`處理，template快將交給Vue自己的`vue-template-loader`處理它會將模板轉(zhuǎn)換并傳輸給`render`函數(shù)。

vue-loader最后的輸出會是一個(gè)包含在Webpack bundle文件里的JavaScript模塊。

一個(gè)非常典型的vue-loader配置如下：

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

2.優(yōu)化Vue項(xiàng)目的構(gòu)建

## 只在運(yùn)行時(shí)構(gòu)建

如果你的Vue應(yīng)用沒有HTML模板，只是使用到了render函數(shù)，那么你沒有必要使用到Vue的模板編譯功能。那么就可以在Webpack構(gòu)建是忽略這部分的代碼降低打包后的文件大小。

*請記住在開發(fā)模式下單文件組件是被預(yù)編譯到render函數(shù)的*

Vue提供了一個(gè)`runtime-only`的庫，這個(gè)庫包含了除模板編譯外的所有功能，庫名是`vue.runtime.js`。它的搭建比完整版本要小20KB，因此如果可以使用這個(gè)版本那么非常值得這么做。

默認(rèn)情況下就是使用的runtime-only，因此每當(dāng)我們在項(xiàng)目中使用`import vue from 'vue';`就是使用的這個(gè)版本。通過配置`alias`也可以改變這種方式：

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

## 在生產(chǎn)環(huán)境上剝離警告和錯(cuò)誤信息

在生產(chǎn)環(huán)境上降低最終打包文件大小的另外一種方法是移除警告和錯(cuò)誤信息。這樣最終打包的文件里就不再有非必需的代碼，進(jìn)而提高整個(gè)文件的加載速度。

如果你去檢查Vue的源碼你會發(fā)現(xiàn)警告信息處理是根據(jù)當(dāng)前環(huán)境變量`process.env.NODE_ENV`來進(jìn)行判斷的：

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

如果`process.env.NODE_ENV `設(shè)置為`production`那么這部分代碼在構(gòu)建的時(shí)候就會自動的被剝離。

可以使用`DefinePlugin`來設(shè)置`process.env.NODE_ENV `的值，也可以使用`UglifyJsPlugin`插件將代碼進(jìn)行最小化和移除不使用的代碼塊的處理操作。

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

用戶瀏覽器的緩存策略是瀏覽器會判斷網(wǎng)頁文件是否已經(jīng)在本地有未過期的副本，如果存在則瀏覽器會使用本地的緩存文件而不會去服務(wù)器重新下載。

如果將所有的代碼打包在一個(gè)文件里面，那么任何微小的改變都意味著整個(gè)打包文件都得重新下載。理想情況下是用戶盡可能的少下載，多使用本地緩存副本。那么最明智的做好就是將經(jīng)常需要變動的文件與很少變動的文件做分離。

## 第三方庫文件

使用*Common Chunks plugin*能夠?qū)⒌谌綆煳募?如：Vue.js庫)從你的應(yīng)用代碼的抽出為一個(gè)獨(dú)立的文件。

我們可以配置插件判斷文件依賴是否是來自于`node_modules`文件夾，如果是的，那么將這些文件打包輸出到一個(gè)獨(dú)立的文件`vendor.js`

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

## 文件指紋

當(dāng)構(gòu)建生成新的打包文件，我們怎么才能銷毀瀏覽器的緩存或是說怎么才能使緩存失效從而從服務(wù)器加載最新的文件呢？默認(rèn)情況下只有當(dāng)緩存文件失效過期，或是手動清空緩存后，瀏覽器才會從服務(wù)器請求資源文件。當(dāng)服務(wù)器表名文件已經(jīng)被改變后文件將被重新下載(否則服務(wù)器會返回304 Not Modified)。

為避免不必要的請求判斷，我們可以在文件發(fā)生變化時(shí)修改文件的名稱這樣強(qiáng)制瀏覽器重新下載。實(shí)現(xiàn)該功能一個(gè)簡單的辦法就是將“指紋”hash信息添加到文件名里，例如：

當(dāng)文件內(nèi)容發(fā)生變化的時(shí)候 `Common Chunks plugin`會發(fā)出生成一個(gè)“chunkhash”。Webpack在進(jìn)行文件輸出的時(shí)候可以使用這個(gè)hash值將它添加到輸出的文件名里：

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

當(dāng)我們?nèi)绱伺渲煤?#xff0c;打包生成的文件就會發(fā)生變化，類似*app.3b80b7c17398c31e4705.js*

## 自動注入打包文件

當(dāng)我們安裝上面提及的方法為文件添加指紋信息后，那么在每個(gè)引用文件的地方每當(dāng)打包文件發(fā)生變化我們都得去更新引用信息，因?yàn)樯傻奈募看味紩l(fā)生變化(hash值會改變)。

``，如果全部由人工手動的方式來做那么無疑這是個(gè)艱巨的任務(wù)，幸運(yùn)的是我們可以使用*HTML Webpack Plugin *。這個(gè)插件可以在編譯運(yùn)行時(shí)將相關(guān)引用(打包生成的文件)自動注入到html文件中。

一開始我們需要將相關(guān)引用從index.html中移除

index.html

test-6

將*HTML Webpack Plugin*添加到配置信息

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

至此，構(gòu)建生成的帶有指紋信息的文件將自動注入到index.html文件中。

4.代碼分割

默認(rèn)情況下，Webpack將會把所有的應(yīng)用代碼打包到一個(gè)文件里面。但是當(dāng)我們的應(yīng)用有多個(gè)頁面的時(shí)候?qū)⒏髯缘拇a生成到獨(dú)立的文件會更加高效，當(dāng)頁面加載時(shí)只加載各自需要的文件。

Webpack提供了 "code splitting" 的功能可以實(shí)現(xiàn)此要求。

## 異步組件

與將定義對象信息放置作為第二個(gè)參數(shù)相比不同，異步組件需要使用到Promise，例如：

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

## require

當(dāng)需要加載使用異步組件的時(shí)候可以使用Webpack的require語法，這將會告訴Webpack將異步組件打包到一個(gè)獨(dú)立的文件，Webpack將通過AJAX的方式加載這個(gè)文件，因此在代碼里可以這樣寫：

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

## 延遲加載

在Vue.js應(yīng)用中我們會使用*vue-router*來管理將我們的單頁面應(yīng)用轉(zhuǎn)換為多個(gè)頁面，延遲加載是使用Vue和Webpack實(shí)現(xiàn)代碼分割的方式

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

來源：[4 Ways To Boost Your Vue.js App With Webpack](https://vuejsdevelopers.com/2017/06/18/vue-js-boost-your-app-with-webpack/?fbclid=IwAR1E-I2lTdttUGgjHAU-aVtTWoDN0qYeVtDFlKEpevbGGlqEZ4taJIGyT4c)

作者：Anthony Gore

總結(jié)

以上是生活随笔為你收集整理的vue打包的app如何设置自动清理软件缓存_使用Webpack启动你的Vue.js应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。