本文翻譯自，翻譯技巧不太好，不喜勿碰 ：4 Ways To Boost Your Vue.js App With Webpack眾所周知，webpack 是 開發 vue.js 單頁面應用程式的必備工具，通過管理複雜的構建步驟，它可以使您的開發工作流程更加簡單，並且可以優化應用程式的大小和性能。在本文中，我將解釋Webpack增強Vue應用程式的四種方法，包括：
Single file components 單文件組件Optimising the Vue buildBrowser cache managementCode splitting關於 vue-cli
如果您使用模板從vue-cli構建應用程式，那麼將提供預製的Webpack配置。它們已經過優化，沒有任何改進建議！但是，由於它們開箱即用的效果非常好，您可能對它們的實際功能並不太了解，對嗎？考慮一下本文，對vue-cli模板中使用的Webpack配置進行概述，因為它們包含了我在這裡討論的相同優化。
1. Single file components
Vue的特有功能之一是將HTML用於組件模板。但是，這些帶有一個固有的問題：要麼您的HTML標記需要使用笨拙的JavaScript字符串，要麼您的模板和組件定義必須位於單獨的文件中，從而使其難以使用。
Vue有一個優雅的解決方案，稱為「單個文件組件（SFC）」，該文件將模板，組件定義和CSS都包含在一個簡單的.vue文件中：
<template><divid="my-component">...</div></template><script> export default {...}</script><style> #my-component {...}</style>vue-loader Webpack插件使SFC成為可能。該加載器拆分SFC語言塊並將每個管道通過管道傳輸到適當的加載器，例如腳本塊轉到babel-loader，而模板塊轉到Vue自己的vue-template-loader，後者將模板轉換為JavaScript渲染函數。vue-loader的最終輸出是一個JavaScript模塊，準備將其包含在Webpack捆綁包中。vue-loader的典型配置如下：
module:{ rules:[{ test:/\.vue$/, loader:'vue-loader', options:{ loaders:{// Override the default loaders}}},]}2. Optimising the Vue build
如果僅在Vue應用程式*中使用渲染功能，而沒有HTML模板，則不需要Vue的模板編譯器。您可以通過從Webpack構建中省略編譯器來減小捆綁包的大小。請記住，單個文件組件模板已在開發中預編譯以呈現功能！Vue.js庫只有運行時版本，其中包含Vue.js的所有功能，但模板編譯器稱為vue.runtime.js。它比完整版本小20KB，因此如果可以的話值得使用。
默認情況下，僅使用運行時構建，因此，每次使用 import vue from 'vue' 時，都將使用它。在您的項目中，這就是您所得到的。但是，您可以使用alias 別名配置選項更改為其他版本：
resolve:{alias:{'vue$':'vue/dist/vue.esm.js' // Use the full build}},Stripping out warnings and error messages in production
減小Vue.js構建大小的另一種方法是刪除生產中的任何錯誤消息和警告。這些使用不必要的代碼使輸出包大小膨脹，並且還導致您最好避免運行時開銷
如果您檢查Vue原始碼，則會看到警告塊取決於環境變量process.env.NODE_ENV的值，例如：
if (process.env.NODE_ENV !== 'production') { warn(("Error in " + info + ": \"" + (err.toString()) + "\""), vm);}如果將process.env.NODE_ENV設置為生產，那麼在構建過程中，minifier可以自動將此類警告塊從代碼中剝離。
您可以使用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. Browser cache management
用戶的瀏覽器將緩存您網站的文件，以便僅在該瀏覽器尚無本地副本或本地副本已過期時才下載。
如果您所有的代碼都在一個文件中，那麼進行微小的更改就意味著需要重新下載整個文件。
理想情況下，您希望用戶下載得儘可能少，因此將應用程式很少更改的代碼與頻繁更改的代碼分開是明智的。
Vendor file
Common Chunks插件可以將您的 vendor 代碼（例如，不太可能經常更改的Vue.js庫之類的依賴項）與您的應用程式代碼（每次部署可能更改的代碼）分離。您可以配置插件以檢查依賴項是否來自node_modules文件夾，如果是，則將其輸出到單獨的文件vendor.js中：
new webpack.optimize.CommonsChunkPlugin({name: 'vendor', minChunks: function (module){ return module.context && module.context.indexOf('node_modules') !== -1;}})如果這樣做，您現在在構建輸出中將有兩個單獨的文件，這些文件將由瀏覽器獨立緩存：
<scriptsrc="vendor.js"charset="utf-8"></script><scriptsrc="app.js"charset="utf-8"></script>Fingerprinting
當構建文件更改時，我們如何破壞瀏覽器的緩存？默認情況下，僅當緩存的文件到期時，或者當用戶手動清除緩存時，瀏覽器才會再次從伺服器請求文件。如果伺服器指示文件已更改，則將重新下載該文件（否則伺服器返回HTTP 304 Not Modified）。為了節省不必要的伺服器請求，我們可以在每次文件內容更改時更改其名稱，以強制瀏覽器重新下載該文件。一個簡單的系統可以通過在文件名後附加一個哈希來為文件名添加「指紋」：
image.png
Common Chunks插件會發出「 chunkhash」，如果文件內容已更改，則將對其進行更新。Webpack可以在輸出文件名時將此哈希附加到文件名中：
output:{filename:'[name].[chunkhash].js'},執行此操作時，您將看到輸出的文件將具有類似app.3b80b7c17398c31e4705.js的名稱。
Auto inject build files
當然，如果添加哈希，則必須更新索引文件中對該文件的引用，否則瀏覽器將不知道該哈希：
<scriptsrc="app.3b80b7c17398c31e4705.js"></script>手動完成這項工作非常繁瑣，因此請使用HTML Webpack插件為您完成。該插件可以在捆綁過程中自動將對構建文件的引用注入到HTML文件中。首先刪除對構建文件的引用：
<!DOCTYPE html><html><head><metacharset="utf-8"><title>test-6</title></head><body><divid="app"></div><!-- built files should go here, but will be auto injected --></body></html>並將HTML Webpack插件添加到您的Webpack配置中：
new HtmlWebpackPlugin({filename:'index.html'template:'index.html',inject: true,chunksSortMode:'dependency'}),現在，帶有哈希的構建文件將自動添加到索引文件中。另外，您的index.html文件現在將包含在捆綁輸出中，因此您可能需要告訴Web伺服器其位置已更改
4. Code splitting
默認情況下，Webpack會將所有應用程式代碼輸出到一個大捆綁包中。但是，如果您的應用有多個頁面，則拆分代碼會更有效，因此每個單獨的頁面代碼都位於單獨的文件中，並且僅在需要時才加載Webpack具有一項稱為「代碼拆分」的功能。在Vue.js中實現此功能還需要異步組件，並且通過Vue Router變得更加容易。
Async components
異步組件沒有將定義對象作為第二個參數，而是具有一個Promise函數來解析該定義對象，例如：
Vue.component('async-component',function(resolve, reject){setTimeout(()=>{resolve({// Component definition including props, methods etc.});},1000)})Vue僅在組件實際需要渲染時才調用該函數。它還會緩存結果以供將來重新渲染。如果我們設計應用程式，使每個「頁面」都是一個組件，並且將定義存儲在伺服器上，那麼我們就完成了代碼拆分的一半。
require
要從伺服器加載異步組件的代碼，請使用Webpack require語法這將指示Webpack在構建時將async-component捆綁在一個單獨的bundle中，更好的是，Webpack將使用AJAX處理此bundle的加載，因此您的代碼可以像這樣簡單：
Vue.component('async-component',function(resolve){require(['./AsyncComponent.vue'], resolve)});Lazy loading
在Vue.js應用程式中，vue-router通常是您用於將SPA組織到多個頁面中的模塊。延遲加載是使用Vue和Webpack實現代碼拆分的一種形式化方法。
constHomePage=resolve=>require(['./HomePage.vue'], resolve);const rounter =newVueRouter({ routes:[{ path:'/', name:'HomePage', component: HomePage}]})翻譯到此為止了，如果可以歡迎點讚關注我的公主號