1. 程式人生 > >關於vue-cli腳手架打包後vendor檔案過大

關於vue-cli腳手架打包後vendor檔案過大

大家會遇到打包後文件很大,導致頁面初始化載入的速度很慢。會出現白屏的現象。這一般是你打包的vendor太大的緣故。如果你打包後看到你的vendor檔案有700kb以上。你就要考慮怎麼處理。
處理這種檔案的
1、把不常改變的庫放到index.html中,通過cdn引入,比如下面這樣:

 <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
 <script src="https://unpkg.com/[email protected]/dist/vue-router.js">
</script> <script src="https://unpkg.com/[email protected]/lib/index.js"></script> <script src="https://unpkg.com/[email protected]/lib/index.js"></script> <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>

然後找到build/webpack.base.conf.js檔案,在 module.exports = { } 中新增以下程式碼

  externals:{
    'vue':'Vue',
    'element-ui':'ELEMENT',
    'mint-ui':'MINT',
    'axios':'axios',
    'vue-router':'VueRouter',
  },  

2、通過路由的懶載入

export default new VueRouter({//這個為什麼用VueRouter  是通過script標籤引入的
 mode: 'history',
  routes: [
    {
      path: '/',
      redirect: '/master/closestore/today'
}, { path: '/master/closestore/today', name: 'CloseingCount', component: resolve => require(['@/components/ClosingCount'], resolve) }, ]});

相關推薦

關於vue-cli腳手架打包vendor檔案

大家會遇到打包後文件很大,導致頁面初始化載入的速度很慢。會出現白屏的現象。這一般是你打包的vendor太大的緣故。如果你打包後看到你的vendor檔案有700kb以上。你就要考慮怎麼處理。 處理這種檔案的 1、把不常改變的庫放到index.html中,通過c

解決vue-cli build打包CSS瀏覽器相容字首自動去除的問題

今天做練手專案部署的時候碰到了個奇怪問題,開發環境裡顯示得好好的CSS prefixer樣式,到production環境就消失了。 我開發環境用的是 scss ,剛開始我還以為是 scss 處理器的問題,後來研究了下 build 指令碼,發現人家把CSS統一用一個外掛給壓縮了,然後追查之下發現這個外

vue-cli webpack打包加載資源的路徑問題

vue專案,訪問打包後的專案,輸入路徑後,頁面載入空白。這時會有兩類問題,都是路徑問題。 1.一個是css,js,ico等檔案載入不到,是目錄裡少了dist 開啟頁面時一片空白 解決辦法: config/index.js檔案的build->assetsPub

vue專案打包文件怎麼辦,如何優化載入速度

路由懶載入 const Home = () => import('./views/Home.vue'); const MyInfo = () => import('./views/MyInfo.vue'); 在.babelrc中 "plugins": ["@babe

IE9引發的血案-如何處理webpack打包體積依然的css檔案

專案技術棧 React + Webpack4 瀏覽器相容性:較高版本的FireFox,Chrome以及IE9+(注意:坑從此中來) 問題描述 專案在IE9中很多Css Style無法正確的顯示,而在其他瀏覽器中無此類問題。 最好的解決方

vue-cli build打包CSS瀏覽器相容字首自動去除的問題

今天構建發現 原本是很正常的一個相容性寫法漸變。結果npm run build專案時background: -webkit-linear-gradient(left,#ccc,#fff)backgrou

vue-cli專案打包圖片路徑問題

專案目錄結構如下(圖片習慣放在src->assets->img裡面)第一步,修改config目錄裡面的index.js檔案將 assetsPublicPath: '/' 改為 assetsPublicPath: './'第二步,修改build目錄裡面的utils.

vue專案打包之後js檔案怎麼辦?

話不多說直接上圖 優化前: 優化後: 第一張圖中的 1.09 M是我的專案經過打包編譯之後的js檔案大小,確實有點大了,第一次開啟頁面的時候會比較慢。所以就需要想辦法來解決這個問題了。 再檢視官網之後,發現官網給我們提供了一個懶載入,相當於圖片懶

maven打包flash檔案,無法正常執行

最近一個老專案重構,前臺使用了swfupload來實現多檔案上傳,這是一個用flash實現的外掛。 開發階段,打包測試時均無問題。測試階段,在伺服器部署後,該外掛就莫名失效了。 經過排查最終確認是maven打測試包時,加上了資源過濾導致swfupload.swf檔案變大。  

webpack打包之後的檔案的解決方法

以前一直使用create-react-app這個腳手架進行react開發,後面因為一些自定義的配置,轉而使用webpack搭建一套自己的腳手架。但是在使用webpack打包之後發現,納尼?怎麼檔案這麼大

解決vue-cli npm run build之後vendor.js檔案的問題(打包優化)

問題       vue-cli npm run build命令預設把dependencies中的依賴統一打包,導致vendor.js檔案過大,出現首屏載入過於緩慢的問題。 解決方案       像vue、axios、element-ui這些基本上不會改變的依賴我們

vuecli開發專案,檔案打包,appjs/vendorjs檔案

專案上線後,瀏覽器第一次載入會特別特別慢,network中看到vendorjs檔案1.9M,不慢才怪。 echarts按需引入後,也有1.1M左右,由於對vue腳手架理解不深,自己扒了大量的文件,又測 試了很多次,才測試成功,暫時簡單記錄下。 npm run build --report 可

詳解 vue-cli打包配置檔案程式碼

一、前言   對於webpack基礎不好,node指令不通的童鞋。估計對自己搭建Vue、react腳手架是相當頭疼的,有種無從下手的感覺。然而,從頭看這2塊,耗時太長,而且說實話得練才行,不練練手看不明白。那大多數人就採取折中的方案,修改成熟的腳手架,改成自己想要的樣子。這個相對來說難度降低了不

vue-cli生成的模板各個檔案詳解(轉) vue-cli腳手架中webpack配置基礎檔案詳解

vue-cli腳手架中webpack配置基礎檔案詳解 一、前言 原文:https://segmentfault.com/a/1190000014804826 vue-cli是構建vue單頁應用的腳手架,輸入一串指定的命令列從而自動生成vue.js+wepack的專案模板。這其中webpack發揮了很大

vue-cli構建的vue項目打包css引入的背景圖路徑不對的問題

public 相對 根據 路徑 span 目錄 圖片 pub 正常 使用vue-cli構建vue項目後,再打包遇到一個css引入的背景圖片路徑的問題,就是css代碼中背景圖片是根據相對路徑來寫的,如下圖:    當使用npm run dev命令本地訪問的時候,背景圖片是正常

vue-cli 腳手架中 webpack 配置基礎檔案詳解

一、前言 vue-cli是構建vue單頁應用的腳手架,輸入一串指定的命令列從而自動生成vue.js+wepack的專案模板。這其中webpack發揮了很大的作用,它使得我們的程式碼模組化,引入一些外掛幫我們完善功能可以將檔案打包壓縮,圖片轉base64等。後期對專案的配置使

新版的vue-cli腳手架中少了dev-server.js檔案,怎麼模擬後臺資料呢?

        第一步:,在webpack.dev.conf.js中加入 在webpack.dev.conf.js中引入node中的express框架即後臺模擬資料json檔案,程式碼如下: //這裡是模擬後臺資料 const expres

Vue Element ui webpack 打包檔案

今天擼完登入模組,打包的時候發現,單一個登入頁面打包完的體積竟然達到了740KB! 模組是基於Vue全家桶 + element ui編寫的,但即使全引入使用,也不應該達到這麼誇張的一個體積。 事出反常必有妖,用Cli初始化專案時附帶的webpack-bundle-analyze

前端框架Vue(12)——如何將 vue-cli 專案打包壓縮(npm run build)放到伺服器

  當我們將 vue 專案完成後,面臨的就是如何將專案進行打包上線,放到伺服器中。我使用的是 vue-cli(simple) 腳手架,所以就講一下如何將專案進行打包,並放到 tomcat 上。   如果是 vue-cli (非 simple 腳手架),這篇

vue webpack打包.css檔案裡面的背景圖片路徑錯誤解決方法

資源相對引用路徑 問題描述 一般情況下,通過webpack+vuecli預設打包的css、js等資源,路徑都是絕對的。 但當部署到帶有資料夾的專案中,這種絕對路徑就會出現問題,因為把配置的static資料夾當成了根路徑,那麼要解決這種問題,就得引用相對路徑。 解決