基于vue-cli npm run build之后vendor.js文件過大的解決方法
問題
vue-cli npm run build命令默認把dependencies中的依賴統(tǒng)一打包，導致vendor.js文件過大，出現(xiàn)首屏加載過于緩慢的問題。
解決方案
像vue、axios、element-ui這些基本上不會改變的依賴我們可以把它們用cdn導入，沒有必要打包到vendor.js中。
1.在項目根目錄index.html使用cdn節(jié)點導入
<div id="app"></div> <!-- 先引入 Vue --> <!--開發(fā)環(huán)境--> <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script> <!--生產(chǎn)環(huán)境--> <!--<script src="https://cdn.bootcss.com/vue/2.5.3/vue.min.js"></script>--> <!-- 引入組件庫 --> <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/1.4.10/index.js"></script>
2.項目根目錄下build/webpack.base.config.js中添加externals
externals: {
vue: 'Vue',
'element': 'element-ui',
'axios':'axios',
},
3.mian.js中import ... from ...就可以去掉了，若沒去掉webpack還是會把對應(yīng)的依賴進行打包。
2018.01.27補充
在項目config/index.js中可以開啟gzip壓縮，對打包優(yōu)化也有很大的幫助
1.首先安裝插件 compression-webpack-plugin
cnpm install --save-dev compression-webpack-plugin
2.設(shè)置productionGzip: true
// Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: true, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report
3.npm run build執(zhí)行后會發(fā)現(xiàn)每個js和css文件會壓縮一個gz后綴的文件夾，瀏覽器如果支持g-zip 會自動查找有沒有g(shù)z文件 找到了就加載gz然后本地解壓 執(zhí)行。
以上這篇基于vue-cli npm run build之后vendor.js文件過大的解決方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在本篇文章里小編給大家整理了關(guān)于vue中axios的二次封裝實例以及相關(guān)知識點總結(jié)，需要的朋友們可以學習下。2019-10-10
使用Vue?Query實現(xiàn)高級數(shù)據(jù)獲取的示例詳解
構(gòu)建現(xiàn)代大規(guī)模應(yīng)用程序最具挑戰(zhàn)性的方面之一是數(shù)據(jù)獲取,這也是?Vue?Query?庫的用途所在,下面就跟隨小編一起學習一下如何利用Vue?Query實現(xiàn)高級數(shù)據(jù)獲取吧2023-08-08
解決vue項目中遇到 Cannot find module ‘chalk‘ 報錯的問題
這篇文章主要介紹了解決vue項目中遇到 Cannot find module ‘chalk‘ 報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
前端數(shù)據(jù)存儲常用工具Vuex、Pinia、Redux詳解
Redux、Vuex 和 Pinia 都是用于狀態(tài)管理的流行框架,這篇文章主要介紹了前端數(shù)據(jù)存儲常用工具Vuex、Pinia、Redux的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-04-04
集成vue到j(luò)query/bootstrap項目的方法
下面小編就為大家分享一篇集成vue到j(luò)query/bootstrap項目的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue3組合式api實現(xiàn)v-lazy圖片懶加載的方法實例
vue作為前端主流的3大框架之一,目前在國內(nèi)有著非常廣泛的應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue3組合式api實現(xiàn)v-lazy圖片懶加載的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue實現(xiàn)百度下拉列表交互操作,結(jié)合實例形式分析了vue.js使用jsonp針對百度接口進行交互的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了vue打包部署到tomcat上頁面空白資源加載不出來的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
在Vue中可以使用Vue.prototype向Vue的全局作用域添加屬性或方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-06-06
解決VUE中document.body.scrollTop為0的問題
今天小編就為大家分享一篇解決VUE中document.body.scrollTop為0的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09