Ⅰ vue編譯打包速度優化
1、首先在config文件夾下配置webpack.dll.config.js(內容如下),要打包的模塊的數組可以將一些較大的依賴放進vendor中
2、在package.json的scripts加上
3、運行npm run dll就可以生成vendor-manifest.json和vendor.dll.js
4、然後在index.html中引入vendor.dll.js
然後就可以正常的進行編譯打包,會發現將更多的依賴放到vendor,打包速度越快
優化前
優化後
大概平均可以節省三分之一的時間。參考 webpack中文網
Ⅱ 一個.vue文件,是如何被編譯在瀏覽器中運行的
自我理解的作用:解析轉換.vue文件。提取出script,css,template,再分別交給對應的loader去處理。核心就是提取。
官方定義:
1、允許為唯胡鏈vue組件的每個部分使用他的webpack loader,例如在style中使用sass,在template中使用Pug
2、允許一個.vue文件中做凳使用自定義塊,並對其運用自定義的loader鏈
3、使用webpack loader將style,template中引用的資源當作模塊依賴處理
4、為指孫每個組件模擬出scoped css
5、在開發過程中使用熱重載來保持狀態