<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        基于vue-cli npm run build之后vendor.js文件過大的解決方法

        來源:懂視網 責編:小采 時間:2020-11-27 22:06:55
        文檔

        基于vue-cli npm run build之后vendor.js文件過大的解決方法

        基于vue-cli npm run build之后vendor.js文件過大的解決方法:問題 vue-cli npm run build命令默認把dependencies中的依賴統一打包,導致vendor.js文件過大,出現首屏加載過于緩慢的問題。 解決方案 像vue、axios、element-ui這些基本上不會改變的依賴我們可以把它們用cdn導入,沒有必要打包到vendor.js中。
        推薦度:
        導讀基于vue-cli npm run build之后vendor.js文件過大的解決方法:問題 vue-cli npm run build命令默認把dependencies中的依賴統一打包,導致vendor.js文件過大,出現首屏加載過于緩慢的問題。 解決方案 像vue、axios、element-ui這些基本上不會改變的依賴我們可以把它們用cdn導入,沒有必要打包到vendor.js中。

        問題

        vue-cli npm run build命令默認把dependencies中的依賴統一打包,導致vendor.js文件過大,出現首屏加載過于緩慢的問題。

        解決方案

        像vue、axios、element-ui這些基本上不會改變的依賴我們可以把它們用cdn導入,沒有必要打包到vendor.js中。

        1.在項目根目錄index.html使用cdn節點導入

        <div id="app"></div>
        <!-- 先引入 Vue -->
        <!--開發環境-->
        <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
        <!--生產環境-->
        <!--<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還是會把對應的依賴進行打包。

        2018.01.27補充

        在項目config/index.js中可以開啟gzip壓縮,對打包優化也有很大的幫助

        1.首先安裝插件 compression-webpack-plugin

        cnpm install --save-dev compression-webpack-plugin

        2.設置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執行后會發現每個js和css文件會壓縮一個gz后綴的文件夾,瀏覽器如果支持g-zip 會自動查找有沒有gz文件 找到了就加載gz然后本地解壓 執行。

        以上這篇基于vue-cli npm run build之后vendor.js文件過大的解決方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        基于vue-cli npm run build之后vendor.js文件過大的解決方法

        基于vue-cli npm run build之后vendor.js文件過大的解決方法:問題 vue-cli npm run build命令默認把dependencies中的依賴統一打包,導致vendor.js文件過大,出現首屏加載過于緩慢的問題。 解決方案 像vue、axios、element-ui這些基本上不會改變的依賴我們可以把它們用cdn導入,沒有必要打包到vendor.js中。
        推薦度:
        標簽: VUE run build
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 人妻无码久久一区二区三区免费| 亚洲视频在线观看| va天堂va亚洲va影视中文字幕| 免费无码又爽又刺激网站| 亚洲色婷婷综合开心网| 日本系列1页亚洲系列| 成人免费无码大片A毛片抽搐| 亚洲永久在线观看| 啦啦啦手机完整免费高清观看| 国产午夜亚洲精品| 午夜高清免费在线观看| 亚洲精品无码中文久久字幕| 日本a级片免费看| 在线精品自拍亚洲第一区| 亚洲成?Ⅴ人在线观看无码| EEUSS影院WWW在线观看免费| 亚洲午夜久久久影院| 最新久久免费视频| 中文字幕亚洲综合久久| AV无码免费永久在线观看| 亚洲AV无码一区二区三区牛牛| 国产在线播放免费| 中文字幕免费在线看电影大全 | 国产免费直播在线观看视频| 性生大片视频免费观看一级| 亚洲精品无码鲁网中文电影| 久久99热精品免费观看动漫 | AV激情亚洲男人的天堂国语| 亚洲国模精品一区| 999任你躁在线精品免费不卡| 色老板亚洲视频免在线观| 亚洲成a人片在线观看日本麻豆| 精品亚洲永久免费精品| 亚洲ts人妖网站| 亚洲狠狠爱综合影院婷婷| 曰批全过程免费视频网址 | 亚洲国产精品久久久久婷婷老年 | 国产成A人亚洲精V品无码性色| 亚洲免费一级视频| 免费手机在线看片| 亚洲国产精品日韩在线|