Webpack是開發Vue.js單頁面應用(SPA)最基本的工具。通過管理負責的構建步驟能夠使開發工作流非常的簡單，同時也能夠優化應用的大小提升應用的性能。

在這篇文章我將為大家展示Webpack是如何應用在Vue app中的，包括

1. 單文件組件

2. 優化Vue項目的構建

3. 瀏覽器緩存管理

4. 代碼分割

關于Vue-cli

如果你是使用vue-cli創建的項目整體框架，那么默認就提供了Webpack的配置文件。Webpack已經很好的集成到你的項目中了，我也沒有更進一步提升的優化的建議可以提供！

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

1.單文件組件

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

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

...

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

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

一個非常典型的vue-loader配置如下：

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

2.優化Vue項目的構建

## 只在運行時構建

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

*請記住在開發模式下單文件組件是被預編譯到render函數的*

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

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

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

## 在生產環境上剝離警告和錯誤信息

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

如果你去檢查Vue的源碼你會發現警告信息處理是根據當前環境變量`process.env.NODE_ENV`來進行判斷的：

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

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

可以使用`DefinePlugin`來設置`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.瀏覽器緩存管理

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

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

## 第三方庫文件

使用*Common Chunks plugin*能夠將第三方庫文件(如：Vue.js庫)從你的應用代碼的抽出為一個獨立的文件。

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

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

## 文件指紋

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

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

當文件內容發生變化的時候 `Common Chunks plugin`會發出生成一個“chunkhash”。Webpack在進行文件輸出的時候可以使用這個hash值將它添加到輸出的文件名里：

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

當我們如此配置后，打包生成的文件就會發生變化，類似*app.3b80b7c17398c31e4705.js*

## 自動注入打包文件

當我們安裝上面提及的方法為文件添加指紋信息后，那么在每個引用文件的地方每當打包文件發生變化我們都得去更新引用信息，因為生成的文件名每次都會發生變化(hash值會改變)。

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

一開始我們需要將相關引用從index.html中移除

index.html

test-6

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

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

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

4.代碼分割

默認情況下，Webpack將會把所有的應用代碼打包到一個文件里面。但是當我們的應用有多個頁面的時候將各自的代碼生成到獨立的文件會更加高效，當頁面加載時只加載各自需要的文件。

Webpack提供了 "code splitting" 的功能可以實現此要求。

## 異步組件

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

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

## require

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

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

## 延遲加載

在Vue.js應用中我們會使用*vue-router*來管理將我們的單頁面應用轉換為多個頁面，延遲加載是使用Vue和Webpack實現代碼分割的方式

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。