關於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資料夾當成了根路徑,那麼要解決這種問題,就得引用相對路徑。 解決