vue-cliプロジェクトのパッケージ化後のファイルが大きすぎて画像の読み込みが遅い問題について

最近、プロジェクトに取り組んでいるときに、vue プロジェクトのパッケージ化後のファイル サイズが非常に大きくなり、大きな背景画像の読み込みが遅くなるという問題に遭遇しました。

まずは梱包後の大量発生の解決策についてお話します

ステップ 1: 次のコードを vue.config.js ファイルのchainWebpack メソッドに追加します。これにより、vue、elementUI などの vue で導入された一部のメソッドがプロジェクトにパッケージ化されず、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()
    }
}

ステップ 2: 次のように、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
      })
    ]
  }

ステップ 3: 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)

上記の 3 つの手順は基本的にプロジェクトをある程度圧縮できます。私自身で何度もテストしましたが、プロジェクトのボリュームが大幅に削減されます。

なぜこれらの箇所がコメントになっているかというと、最初のステップで vue、axios、router、elementuUI などのパッケージを cdn サーバーから取得しているため、プロジェクト内で参照する必要がないためです。 gzip を使用して圧縮すると、ボリュームが非常に小さくなります。