vue-cli4.x项目优化

一、打包优化
主要是对比打包后的文件以及代码加载做优化
1、未优化时打包文件大小

2、
大概查看了下发现中有比较大的图片，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了
后续更新
3、