关于对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]', // 提示[email protected]的话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进行压缩，体积就会很小了

关于对vue-cli项目打包后文件过大，以及图片加载慢的问题

猜你喜欢