<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          使用webpack提升vue應用的4種方式

          時間:?2017-11-27閱讀:?1127標簽:?vue
          譯者注:本篇文章所提到的幾個措施大家可能都曾經在項目里用過,但是就如作者所言:你只是在用,并不知道為什么用,本文最大的價值在于提供了系統的優化方案并解釋了原因

          webpack是開發Vue單頁應用必不可少的工具,它能管理復雜的構建步驟,并且優化你的應用大小和性能, 使你的開發工作流更加簡單。在這篇文章中,我將解釋使用webpack提升你的Vue應用的4種方式,包括:

          單文件組件
          優化Vue構建過程
          瀏覽器緩存管理
          代碼分離


          關于vue-cli

          如果你在使用 vue-cli 提供的模板來構建你的應用,那么webpack的相關配置已經提供好了,這些配置已經經過很好地優化,我也給不了你其他的優化建議了。

          不過因為配置是開箱即用的,所以你很有可能并不知道這些配置真正在做什么,由于 vue-cli 里提供了我將要討論的優化措施,所以,你可以把這篇文章當做模板里webpack配置的概述。

          1.單文件組件

          Vue的特點之一就是使用了基于HTML的模板組件,這帶來了一個本質問題:要么HTML標記使用丑陋的Java字符串,要么將模板內容和組件定義寫在不同的文件中。這帶來了一些困難。

          Vue提供了一種叫做Single File Components(SFCs)的方式來解決這個問題,將模板、組件定義、CSS寫在一個 .vue 文件里。

          MyComponent.vue

          <template>
          <div id="my-component">...</div>
          </template>
          <>
          exportdefault{...}
          </>
          <style>
          #my-component {...}
          </style>


          Vue-loader 使得 SFCs成為可能,這個 webpack loader 將SFCs分隔成不同語言塊,然后輸出到合適的loader,例如 塊 輸出到babel-loader, 模板塊輸出到Vue自己的vue-template-loader,該loader能夠將模板轉換成Java的render函數。

          vue-loader的最終輸出是一個將要包含在 Webpack bundle 中的Java模塊。

          典型的vue-loader配置如下所示:

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


          2.優化Vue構建

          運行時構建

          如果在你的應用中僅僅使用 render函數,不需要HTML模板,那你不需要使用Vue的模板編譯器,通過去掉模板編譯器,可以讓你在Webpack構建過程中,減少bundle 的體積。

          記住單文件組件在開發模式中使用了預編譯

          Vue的運行時構建版本包含了Vue的所有特點,除了模板編譯器,被稱為vue.runtime.js,體積比全功能版本小了20KB,所以這值得你嘗試一下。

          默認情況下使用的是運行時構建版本,所以當你使用 import vue from 'vue' 來引用Vue的時候,你得到的是運行時構建版本,不過你能通過 alias 配置項來改變。

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


          譯者注:在Vue模塊中包含8個文件,各文件的區別可以參考:官方文檔,在需要使用完整版時使用了運行時版本會報warn:

          You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

          production環境中去掉 warn 和 error 信息

          另外一個減少Vue構建體積的方式是在 production環境中去掉所有 error 和 warn信息,這些不必要的代碼導致你打包后的體積膨脹,而且增加了運行時耗時,你最好避免這些消耗。

          如果你調試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([
          newwebpack.DefinePlugin({
          'process.env':{
          NODE_ENV:'"production"'
          }
          }),
          newwebpack.optimize.UglifyJsPlugin()
          ])
          }


          譯者注:實際項目中使用的更多的方式是 production環境 和 其他環境 使用不同的webpack配置文件.

          3.瀏覽器緩存管理

          瀏覽器能夠緩存你的站點文件,只有在你本地沒有副本時或者副本已經過期時才會重新下載。

          如果你所有的代碼都在一個文件里,那一個微小的改動也會導致整個文件的下載,理想情況下,你想要你的用戶盡可能少的下載文件,所以將頻繁改動的代碼和不怎么改動的代碼分開是非常明智的。

          Vendor file

          Common Chunks插件能把你的Vendor代碼(例如Vue.js這些不會經常改動的依賴包)和應用代碼(每次開發過程中都會改動的代碼)分離開。

          你能配置插件檢查一個依賴是否來自于node_modules,如果是,那就打包到vendor.js 文件。

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


          這么做之后,在構建后的輸出文件中,將有兩個獨立的文件,能夠分別被瀏覽器緩存。

          < src="vendor.js"charset="utf-8"></>
          < src="app.js"charset="utf-8"></>


          指紋

          當構建后的文件改動了,我們該怎么丟棄緩存呢?

          默認情況下,只有當一個緩存文件過期,或者用戶手動清除緩存,瀏覽器才會重新從服務器請求文件,如果服務器提示文件已經改動,那文件才會重新被下載(如果返回304則不會)。

          為了避免不必要的請求,我們可以在每次文件內容改動時,改變文件的名字,從而強制瀏覽器重新下載,通過在文件名稱后面添加一個"指紋":hash,我們可以非常容易達到這個目的。


          Common Chunks插件生成"chunkhash",能隨著文件的改動而更新,Webpack能在輸出時,將這個hash值添加到文件名稱末尾。

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


          這樣做的話,你會發現輸出的文件名稱類似于app.3b80b7c17398c31e4705.js。

          譯者注:chunkhash并不需要Common Chunks生成,而是webpack自動生成的,而且據官方文檔,Common Chunks是無法生成chunkhash的,作者在這里這么寫讓我摸不著頭腦, 另外,還有一種添加hash值的方式是使用

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


          其中的區別主要在于chunkhash是基于內容生成的hash值,而hash值是基于模塊標識(webpack打包時每個模塊都有一個唯一標識),hash值的主要問題在于任何一個文件更新之后都會更新hash值,導致那些內容沒有更新的文件的文件名也更新了,需要重新下載。具體區別可參考:webpack配置:緩存。

          自動插入構建文件

          當然了,增加了hash值之后,你就必須要在index文件里更新你的引用,否則瀏覽器是不會知道的。

          < src="app.3b80b7c17398c31e4705.js"></>


          手動去做這件事將是一件非常沉悶無聊的事情,可以使用HTML Webpack Plugin來做這件事。這個插件能在構建過程中自動在你的HTML文件里插入對構建文件的引用。

          先來把構建文件中的引用去掉

          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>


          然后在Webpack配置里增加HTML Webpack Plugin 的配置。

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


          現在帶有hash值的構建文件將會自動增加到index文件,同時,你的index.html文件也會被包含在輸出文件里,所以你可能需要將這一點告訴服務器。

          4.代碼分離

          默認情況下,Webpack將把你的所有應用代碼輸出到一個大的構建文件中,但是如果你有多個頁面,分隔代碼將每個獨立的頁面輸出到不同的文件中,只有在需要的時候才去加載。

          Webpack有個功能 "code splitting",可以用來做這件事,在Vue.js中需要使用async components,配合Vue Router使用更簡單。

          Async componets

          相比以一個定義對象作為第二個參數,Async components第二個參數是一個Promise函數,該函數將一個對象resolve,例如:

          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)
          });


          懶加載

          在Vue.js應用中,vue-router是一個典型模塊,你可以用它來將SPA轉換成多頁應用,懶加載是利用Vue和Webpack實現代碼分離的官方推薦方式。

          constHomePage =resolve =>require(['./HomePage.vue'],resolve);
          constrounter =newVueRouter({
          routes:[
          {
          path:'/',
          name:'HomePage',
          component:HomePage
          }
          ]
          })


          關于本文

          譯者:@孫輝
          作者:@ANTHONY GORE
          原文:http://vuejsdevelopers.com/2017/06/18/vue-js-boost-your-app-with-webpack


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/174

          Vue 的 .sync 修飾符

          .sync 修飾符算是 Vue 的所有修飾符中較難理解的一個,本篇文章就帶你走近 .sync 的世界,深入理解后會發現,其實也就那么回事。修飾符和指令息息相關,下面從 指令 -> 修飾符 -> .sync 修飾符 由淺入深地來講解 .sync 的含義及用法。

          vue中is的作用和用法

          總所周知,ul里面嵌套li的寫法是html語法的固定寫法(還有如table,select等)。my-component是我們自己寫的組件,但是html在渲染dom的時候,my-component對ul來說并不是有效的dom,甚至會報錯。

          一點 Vue.observable 想法

          Vue 2.6.0 新增了 Vue.observable api,但最近才去嘗試使用它。這東西說新也不新,因為他就是 vue 本身的功能,只是暴露出來,成為新 api 了。在老版本中,直接用 new Vue({ data: {} }) 也一樣。

          12種使用Vue的最佳做法

          隨著 VueJS 的使用越來越廣泛,出現了幾種最佳實踐并逐漸成為標準。在本文中,主要分享在平時開發中一些有用資源和技巧,廢話少說,我們開始吧。

          如何理解vue中的v-bind?

          若不是動態屬性,首先為其增加駝峰化后的監聽,然后再為其增加一個連字符的監聽,例如v-bind:foo-bar.sync,首先v-on:update:fooBar,然后v-on:update:foo-bar。v-on監聽是通過addHandler加上的。

          Vue.use到底是什么?

          我們在使用Vue做項目開發的時候,看到不少輪子都是通過Vue.use來進行使用,感覺甚是高大上。不過Vue.use到底是什么鬼?不妨來看個究竟。

          Vue.js最佳實踐:五招讓你成為Vue.js大師

          本文面向對象是有一定Vue.js編程經驗的開發者。如果有人需要Vue.js入門系列的文章可以在評論區告訴我,有空就給你們寫。對大部分人來說,掌握Vue.js基本的幾個API后就已經能夠正常地開發前端網站

          vue介紹

          庫是一種插件,是一種封裝好的特定方法的集合。提供給開發者使用,控制器在使用者手里。框架是一套架構,會基于自身特定向用戶提供一套相當完整的解決方案,控制權在框架本身

          vue有時候你不需要 $emit & $on

          在此之前,子組件到父組件的傳遞事件我一般還是使用 $emit 和 $on,因為這個操作理解起來并不難,代碼一般也挺清晰。不過今天遇到這么個情況 ——

          Vue最佳實踐

          Vue 最佳實踐,是參考 Vue 官方風格指南并根據過去 Vue 實際項目開發中的經驗總結的一套規范建議。本項目的目的是希望每個 Vue 開發者都能盡快熟悉并上手項目代碼,志在幫助 Vue 新手開發者及時避免一些不規范的設計和由此而引發的問題

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网