vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积

vue 页面首次加载缓慢原因及解决方案，打包代码压缩Gzip，图片压缩

• 1.vue 页面首次加载缓慢原因及解决方案，及使用compression-webpack-plugin 进行打包代码压缩Gzip
• 2.vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积

1.vue 页面首次加载缓慢原因及解决方案，及使用compression-webpack-plugin 进行打包代码压缩Gzip

npm install --save-dev compression-webpack-plugin@1.1.2

       productionSourceMap: false,//此处更改为false
        // https://webpack.js.org/configuration/devtool/#production
        devtool: #source-map,

        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to true, make sure to:
        // npm uninstall --save-dev compression-webpack-plugin
        // npm install --save-dev compression-webpack-plugin
        // npm install --save-dev compression-webpack-plugin@1.1.2
        // productionGzip: false,
        productionGzip: true,//此处更改为true
        productionGzipExtensions: [js, css],

2.vue正常打包之后一些图片文件很大，使打包体积很大，通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积

npm install image-webpack-loader --save-dev

    module: {
        rules: [{
                test: /.vue$/,
                loader: vue-loader,
                options: vueLoaderConfig
            },
            {
                test: /.js$/,
                loader: babel-loader,
                include: [resolve(src), resolve(test), resolve(node_modules/webpack-dev-server/client)]
            },
            {
            //此处更改
                test: /.(png|jpe?g|gif|svg)(?.*)?$/,
                // loader: url-loader,
                // options: {
                // limit: 100000,
                // name: utils.assetsPath(img/[name].[hash:7].[ext])
                // }
                loader: [url-loader?limit=10000&name= + utils.assetsPath(img/[name].[hash:7].[ext]),
                    image-webpack-loader
                ]
            },
            {
                test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.*)?$/,
                loader: url-loader,
                options: {
                    limit: 10000,
                    name: utils.assetsPath(media/[name].[hash:7].[ext])
                }
            },
            {
                test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
                loader: url-loader,
                options: {
                    limit: 10000,
                    name: utils.assetsPath(fonts/[name].[hash:7].[ext])
                }
            },
            {
                test: /.scss$/,
                loaders: [style, css, sass]
            }
        ]
    },