快捷導(dǎo)航

vueCl如何查看打包后文件的大小占比

更新時間：2023年06月08日 09:31:10 作者：優(yōu)秀的土豆絲

這篇文章主要介紹了vueCl如何查看打包后文件的大小占比問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vueCl查看打包后文件的大小占比

1. 執(zhí)行以下命令安裝

cnpm install webpack-bundle-analyzer --save-dev

2. vue.config.js 配置

chainWebpack: config => {
    // 查看打包文件體積大小
    config
      .plugin('webpack-bundle-analyzer')
      .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  }

3. 在package.json文件中在 build 后面加上一個 --report

"build": "vue-cli-service build --report"

我們打開http://127.0.0.1:8888之后就會看到一個可視化的文件占比

對vue-cli項(xiàng)目打包后文件過大，以及圖片加載慢的問題

最近在做一個項(xiàng)目時遇到vue項(xiàng)目打包后文件體積特別大，以及一個大背景圖加載緩慢的問題

首先說一下打包后體積大的解決方法

第一步

在vue.config.js文件中的 chainWebpack 方法加入以下代碼，為的就是將vue中引入的一些方法如：vue，elementUI等不打包到我們的項(xiàng)目中，而是直接從cdn服務(wù)器獲取，從而減少打包的體積

圖片加載比較慢的話可以使用下面代碼中config.module的方式，設(shè)置一個cdn的圖片地址，去引入圖片，然后整個vue里面的圖片地址或者背景圖地址的引用都會走這個地址（因?yàn)槲覍ι蟼鱟dn圖片不是很了解，所以使用的方式是：生產(chǎn)環(huán)境ip地址 + 生產(chǎn)環(huán)境vue存儲圖片的路徑，我發(fā)現(xiàn)這種方式遠(yuǎn)比直接在vue中使用圖片的絕對路徑或相對路徑的顯示快很多）

chainWebpack: (config) => {
? ?if (process.env.NODE_ENV === 'production') { ?// 判斷是否為是生成環(huán)境
? ? ?var externals = {
? ? ? ? vue: 'Vue',
? ? ? ? axios: 'axios',
? ? ? ? 'element-ui': 'ELEMENT',
? ? ? ? 'vue-router': 'VueRouter',
? ? ? ? vuex: 'Vuex',
? ? ? ? echarts: 'echarts'
? ? ? }
? ? ? config.externals(externals)
? ? ? const cdn = { // 從cdn中獲取對象文件，減少打包體積
? ? ? ? css: [
? ? ? ? ? // element-ui css
? ? ? ? ? 'https://cdn.bootcdn.net/ajax/libs/element-ui/2.12.0/theme-chalk/index.css',
? ? ? ? ? // nprogress
? ? ? ? ? 'https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css'
? ? ? ? ],
? ? ? ? js: [
? ? ? ? ? // vue
? ? ? ? ? 'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
? ? ? ? ? // vue-router
? ? ? ? ? 'https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.3/vue-router.min.js',
? ? ? ? ? // vuex
? ? ? ? ? 'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.2/vuex.min.js',
? ? ? ? ? // axios
? ? ? ? ? 'https://cdn.bootcdn.net/ajax/libs/axios/0.18.0/axios.min.js',
? ? ? ? ? // element-ui js
? ? ? ? ? 'https://cdn.bootcdn.net/ajax/libs/element-ui/2.12.0/index.js',
? ? ? ? ? // echarts
? ? ? ? ? 'https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js'
? ? ? ? ]
? ? ? }
? ? ? ? // 通過 html-webpack-plugin 將 cdn 注入到 index.html 之中
? ? ? config.plugin('html')
? ? ? ? .tap(args => {
? ? ? ? ? args[0].cdn = cdn
? ? ? ? ? return args
? ? ? })
? ? ? ?// 添加壓縮圖片的方式 ?如果沒有圖片很占加載時間的話，可以省略這步
? ? ? ?config.module
? ? ? ? .rule('images')
? ? ? ? .test(/\.(jpg|png|gif)$/)
? ? ? ? .use('url-loader')
? ? ? ? .loader('url-loader')
? ? ? ? .options({
? ? ? ? ? limit: 10, // 以下配置項(xiàng)用于配置file-loader
? ? ? ? ? // 將圖片改為cdn獲取
? ? ? ? ? publicPath: 'https://oss.xx.com/img',
? ? ? ? ? // 將圖片打包到dist/img文件夾下, 不配置則打包到dist文件夾下
? ? ? ? ? outputPath: 'img',
? ? ? ? ? // 配置打包后圖片文件名
? ? ? ? ? name: '[name].[ext]'
? ? ? ? })
? ? ? ?.end()
? ? }
}

第二步

添加使用gzip方式進(jìn)行代碼壓縮，如下：

// 先引入方法
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
//在添加下面的方法
configureWebpack: {
? ? plugins: [
? ? ? new CompressionWebpackPlugin({
? ? ? ? asset: '[path].gz[query]', // 提示compression-webpack-plugin@3.0.0的話assets改為filename
? ? ? ? algorithm: 'gzip',
? ? ? ? test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
? ? ? ? threshold: 10240,
? ? ? ? minRatio: 0.8
? ? ? })
? ? ]
? }

第三步

注釋掉vue項(xiàng)目中使用 import 引入的vue，elementUI等方法

//注釋掉main.js中的相關(guān)的代碼
// import Vue from 'vue'
// import NProgress from 'nprogress'
// import 'nprogress/nprogress.css'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)
// 注釋掉 vuex中 下面的代碼
// import Vue from 'vue'
// import Vuex from 'vuex'
// Vue.use(Vuex)
//注釋掉 路由中 下面的代碼
// import Vue from 'vue'
// import VueRouter from 'vue-router'
// Vue.use(VueRouter)

以上三步基本能將你的項(xiàng)目壓縮到一定程度了，也是本人自己測試過很多次，很大程度的壓縮了項(xiàng)目的體積

至于為什么要注釋這幾個地方，是因?yàn)樵诘谝徊街?，像vue，axios，router，elementuUI等等，這些包都已經(jīng)從cdn服務(wù)器獲取了，所以就不需要在項(xiàng)目中引用了，所以打包時的體積會小很多，在使用gzip進(jìn)行壓縮，體積就會很小了