vueCl如何查看打包后文件的大小占比
作者：优秀的土豆丝
这篇文章主要介绍了vueCl如何 查看打包后文件的大小占比问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vueCl查看打包后文件的大小占比
1. 执行以下命令安装
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项目打包后文件过大，以及图片加载慢的问题
最近在做一个项目时遇到vue项目打包后文件体积特别大，以及一个大背景图加载缓慢的问题
首先说一下打包后体积大的解决方法
第一步
在vue.config.js文件中的 chainWebpack 方法 加入以下代码，为的就是将vue中引入的一些方法如：vue，elementUI等不打包到我们的项目中，而是直接从cdn服务器获取，从而减少打包的体积
图片加载比较慢的话可以使用 下面代码中config.module的方式，设置一个cdn的图片地址，去引入图片，然后整个vue里面的图片地址或者背景图地址的引用都会走这个地址（因为我对上传cdn图片不是很了解，所以使用的方式是：生产环境ip地址 + 生产环境vue存储图片的路径，我发现这种方式远比直接在vue中使用图片的绝对路径或相对路径的显示快很多）
chainWebpack: (config) => {
if (process.env.NODE_ENV === 'production') { // 判断是否为是生成环境
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, // 以下配置项用于配置file-loader
// 将图片改为cdn获取
publicPath: 'https://oss.xx.com/img',
// 将图片打包到dist/img文件夹下, 不配置则打包到dist文件夹下
outputPath: 'img',
// 配置打包后图片文件名
name: '[name].[ext]'
})
.end()
}
}第二步
添加使用gzip方式进行代码压缩，如下：
// 先引入方法
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项目中使用 import 引入的vue，elementUI等方法
//注释掉main.js中的相关的代码 // 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)
以上三步基本能将你的项目压缩到一定程度了，也是本人自己测试过很多次，很大程度的压缩了项目的体积
至于为什么要注释这几个地方，是因为在第一步中，像vue，axios，router，elementuUI等等，这些包都已经从cdn服务器获取了，所以就不需要在项目中引用了，所以打包时的体积会小很多，在使用gzip进行压缩，体积就会很小了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。