vue中的vendor.js文件過大問題及解決

更新時(shí)間：2022年08月11日 10:33:52 作者：qq_42248520

這篇文章主要介紹了vue中的vendor.js文件過大問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue vendor.js文件過大問題

1. cdn 引入

index.html中cdn的方式引入vue、vuex、axios、element-ui、vue-router等包，代碼如下:

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg-com/vuex@3.4.0/dist/vuex.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.2.O/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js"></script>

如果是內(nèi)網(wǎng)開發(fā):cdn下載對應(yīng)版本放入public下(例:public-->minJs-->cdn靜態(tài)文件)

<%if (process.env.NODE_ENV === 'production'){ %>//此處為外網(wǎng)cdn,具體根據(jù)公司需求
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg-com/vuex@3.4.0/dist/vuex.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.2.O/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.min.js"></script>
<%} else {%>
<script src="./minJs/axios.min.js"></script>
<script src="./minJs/vue.min.js"></script>
<script src="./minJs/vuex.js"></script>
<script src="./minJs/vue-router.min.js"></script>
<script src="./minJs/element-ui.min.js"></script>
<%}%>

注意：cdn版本與package版本一直,否則會出現(xiàn)報(bào)錯(cuò),且cdn引用順序又要求(例:element要在vue下面)否則報(bào)錯(cuò)：如下圖

2. 在使用vue等包的地方，注釋掉import引入

在所有使用vue的地方注釋掉引入的vue等包，但是Vue.use(axios)、Vue.use(VueRoter)、Vue.use(vuex)等依然要使用，除了Vue.use(ElementUI), 如果加上這句話，還是會打包element-ui到vendor.js文件中

在main.js

在store文件加中的index.js

在api/request.js文件中

在router/index.js文件中

3. 打包忽視掉vue等包

在vue.config.js

 chainWebpack: (config) => {
    if (isPro) { //isPro 本人判斷是否產(chǎn)線
      config.externals={
        'vue':'vue',
        'vuex':'Vuex',
        'vue-router':'VueRouter',
        'element-ui':'ELEMENT',
        'axios':'axios'
      }
      config.plugin("extract-css").tap((args) => [
        {
          filename: `css/[name].${Version}.css`,
          chunkFilename: `css/[name].${Version}.css`,
        },
      ]);
    }
  },

第四步、如果打包后的文件還是比較大，就采用路由懶加載的方式加載路由

vue打包降低vendors.js文件大小

vue打包項(xiàng)目優(yōu)化

減少vendors.js文件的大小

我們在打包vue項(xiàng)目的時(shí)候經(jīng)常會遇到打包后的文件中vendors.js文件特別大，這個(gè)文件中的內(nèi)容主要是我們項(xiàng)目中引入的第三方插件js文件，我們可以更改webpack的配置文件來排除這些第三方插件，然后在index.html文件中通過增加cdn引入的方式來優(yōu)化我們的代碼，使的我們的項(xiàng)目更快的加載。

方法：

找到vue項(xiàng)目的配置文件，如果使用的是vue-cli4腳手架，可以在項(xiàng)目的根目錄下創(chuàng)建一個(gè)vue.config.js的配置文件，然后在配置文件中增加如下代碼。

module.exports = {
?? ?configureWebpack: config => {
?? ??? ?externals: {
?? ??? ? ? ?vue: 'Vue', ?// 排除Vue文件
?? ??? ? ? ?'vue-router': 'VueRouter', ?// 排除VueRouter
?? ??? ? ? ?moment: 'moment', ? ?// 排除moment組件 一個(gè)時(shí)間格式化插件
?? ??? ? ? ?axios: 'axios', ? ?// 排除axios組件
?? ??? ? ? ?'element-ui': 'ELEMENT', ?// 排除element-ui組件，這里要使用大寫
?? ??? ? ? ?echarts: 'echarts', ?// 排除echarts組件
?? ??? ? ? ?qs: 'Qs' ?// 排除qs組件
?? ??? ? }
?? ? }
?}

externals是webpack的一項(xiàng)配置項(xiàng)，官方解釋：配置選項(xiàng)提供了「從輸出的 bundle 中排除依賴」的方法。相反，所創(chuàng)建的 bundle 依賴于那些存在于用戶環(huán)境(consumer’s environment)中的依賴。此功能通常對 library 開發(fā)人員來說是最有用的，然而也會有各種各樣的應(yīng)用程序用到它。

換句話說就是防止將某些 import 的包(package)打包到 bundle 中。也就是打包時(shí)不打包這些文件。

然后在public目錄下的index.html文件里增加cdn的靜態(tài)資源路徑就ok了。

壓縮文件

這里的壓縮js不是指的代碼的壓縮，而是使用webpack的CompressionPlugin插件進(jìn)行g(shù)zip壓縮，首先安裝插件

npm i -D compression-webpack-plugin

然后在vue.config.js文件中進(jìn)行設(shè)置，找

// 引入插件
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
?? ?configureWebpack: config => {
?? ??? ?return {
?? ??? ??? ?// 插件配置
?? ??? ??? ?plugins: [
?? ??? ??? ?// 實(shí)例化插件
?? ??? ??? ??? ?new CompressionPlugin({
?? ??? ??? ??? ??? ?// 需要壓縮的文件后綴
?? ??? ??? ??? ??? ?test: /\.js$|\.html$|\.css$|\.png$|\.jpg$|\.jpeg$|\.gif$/,
?? ??? ??? ??? ??? ?// 壓縮后的文件
?? ??? ??? ??? ??? ?filename: '[path][base].gz',
?? ??? ??? ??? ??? ?// 超過次大小的文件進(jìn)行處理
?? ??? ??? ??? ??? ?threshold: 102400,
?? ??? ??? ??? ??? ?// 是否刪除原資源
?? ??? ??? ??? ??? ?deleteOriginalAssets: false
?? ??? ??? ??? ?})
?? ??? ??? ?]
?? ??? ?}
?? ?}
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: