vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vueCli查看打包后文件的大小占比

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进行压缩,体积就会很小了

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文