vue-cli4.x項目優化

1、打包優化
主要是對比打包後的文件以及代碼加載作優化
一、未優化時打包文件大小

二、
大概查看了下發現中有比較大的圖片，ok，壓縮！
首先查看下腳手架默認的webpack配置
vue inspect > output.js
只用了url-loader處理了體積較小的文件

/* output.js*/
 /* config.module.rule('images') */
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        use: [
          /* config.module.rule('images').use('url-loader') */
          {
            loader: '/Users/joy/Documents/CodeSpace/一隻船/fe_vue_cms(4)/node_modules/url-loader/dist/cjs.js',
            options: {
              limit: 4096,
              fallback: {
                loader: '/Users/joy/Documents/CodeSpace/一隻船/fe_vue_cms(4)/node_modules/file-loader/dist/cjs.js',
                options: {
                  name: 'img/[name].[hash:8].[ext]'
                }
              }
            }
          },
          /* config.module.rule('images').use('image-webpack-loader') */
          {
            loader: 'image-webpack-loader'
          }
        ]
      },

那麼對大圖片須要對image-webpack-loader進行配置
cnpm install image-webpack-loader --save-dev
注意這裏最好用cnpm安裝 我用npm安裝運行報錯了
配置以下：

/* vue.config.js */
 chainWebpack: config => {
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .end()
    },

查看dist明顯被壓縮了，能夠對比先後的img文件，會發現一些更小的文件壓縮後被轉化爲base64了
後續更新
三、