vue打包生成的文件的js文件過大怎么優(yōu)化

這篇“vue打包生成的文件的js文件過大怎么優(yōu)化”文章的知識點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue打包生成的文件的js文件過大怎么優(yōu)化”文章吧。

vue打包生成的js文件過大優(yōu)化

1.組件按需加載

現(xiàn)在大多的ui庫都是以組件的形式進(jìn)行處理，所以只需導(dǎo)入需要模塊的即可

2.去掉生成map文件

打包時(shí)會生成map文件，而map文件一般都比較大，可以取消生成map文件

（1）config/index.js找到productionSourceMap把true改為false

3.cdn引入

通過外部引入的方式引入這些UI組件庫，從而減少打包文件過大的問題

（1）index.html

引入外部文件，并且加上<router-view> 

（2）main.js

去掉在頁面引入vue和vue-router

4.路由懶加載

5.代碼壓縮

config/index.js 找到 productionGzip 把 false 改為 true

注意：要先安裝compression-webpack-plugin

npm install --save-dev compression-webpack-plugin

6.最后

優(yōu)化前：

優(yōu)化后：

項(xiàng)目打包之后js文件太大問題

問題描述

前端項(xiàng)目打包之后.js文件太大，導(dǎo)致項(xiàng)目第一次加載的時(shí)候太慢，查閱各種解決方案資料，匯總以下幾點(diǎn)：

1.使用cdn引入不怎么改變的第三方庫

類似于

<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>

webpack.base.conf.js 添加：

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

2.使用vue的懶加載

但是官網(wǎng)有一句

如果您使用的是 Babel，你將需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正確地解析語法。

這個(gè)插件依賴于6.x.babel 需要注意

3.服務(wù)器和前端配置開啟壓縮

服務(wù)器nginx配置添加:

  gzip on;
  gzip_static on;  --這個(gè)很重要 不加的話 訪問加載的還是未壓縮的文件

前端配置config/index.js：

 productionGzip: true,

然后再引入插件 compression-webpack-plugin

需要注意版本  "compression-webpack-plugin": "^1.1.12",

前面兩種 文件大小并沒有減少太多 使用第三種的時(shí)候減少的最多

以上就是關(guān)于“vue打包生成的文件的js文件過大怎么優(yōu)化”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。