About the problem that the file is too large after packaging the vue-cli project, and the image loading is slow

Recently, when working on a project, I encountered the problem that the file size of the vue project was extremely large after packaging, and a large background image was loaded slowly.

First of all, let me talk about the solution to the large volume after packaging

Step 1: Add the following code to the chainWebpack method in the vue.config.js file, so that some methods introduced in vue such as: vue, elementUI, etc. are not packaged into our project, but directly obtained from the cdn server , thereby reducing the volume of the package

If the image loading is slow, you can use the config.module method in the following code to set a cdn image address to import the image, and then the reference of the image address or background image address in the entire vue will go to this address (because I upload cdn The picture is not very familiar, so the way to use it is: production environment ip address + production environment vue storage picture path, I found that this way is much faster than using the absolute path or relative path of the picture directly in 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()
    }
}

Step 2: Add code compression using gzip, as follows:

// 先引入方法
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
      })
    ]
  }

Step 3: Comment out the vue, elementUI and other methods introduced by using import in the vue project

//注释掉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)

The above three steps can basically compress your project to a certain extent, and I have tested it many times by myself, which greatly reduces the volume of the project

As for why these places are commented, it is because in the first step, such packages as vue, axios, router, elementuUI, etc., have been obtained from the cdn server, so there is no need to reference them in the project, so they are packaged The volume will be much smaller when using gzip to compress, the volume will be very small