vue-cli3.0实现打包gzip压缩和一些东西

一.查看自己的打包详情，那个文件过大

1.npm安装要用的插件

npm install --save-dev webpack-bundle-analyzer

2.在vue.config.js文件中引入插件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin  

3.添加配置，使用的是默认的配置

module.exports = {
 configureWebpack: {
    plugins: [
            // 查看打包详细配置
            new BundleAnalyzerPlugin(),
            ]
        }
    }

4.然后直接运行项目，就会默认打开http://127.0.0.1:8888为项目的打包详情

二.使用gzip对打包之后的文件进行压缩，超有用，但是会增加服务器的cpu使用率

1.安装需要的插件

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

2.在头部引入插件

const path = require('path');
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'

3.添加配置文件

module.exports = {
    configureWebpack: {
          resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
                '@i': path.resolve(__dirname, './src/assets'),
            }
        },
        plugins: [
            // Ignore all locale files of moment.js
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

            // 配置compression-webpack-plugin压缩
            new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }),
            new webpack.optimize.LimitChunkCountPlugin({
                maxChunks: 5,
                minChunkSize: 100
            })
        ]
    }    
}

4.运行打包命令 npm run build 就可以，在打包出来的文件中就包含.gz文件，直接放置在服务器上即可

检测有没有成功试用，可以通过请求头

，也可以通过文件的大小查看

最后贴一下整个vue.config.js文件，有什么还可以优化的欢迎指点

const path = require('path');

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin    
module.exports = {
    lintOnSave: false,
    publicPath: './',
    outputDir: "newad",
    productionSourceMap: false,
    configureWebpack: {
        externals: {
            'vue': 'Vue',
            // 'vue-router': 'VueRouter',
            'router': 'VueRouter',
            'axios': 'axios',
            'vant': 'vant'
                //包名 ： 全局变量
        },
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
                '@i': path.resolve(__dirname, './src/assets'),
            }
        },
        plugins: [
            // 查看打包详细配置
            // new BundleAnalyzerPlugin(),
            // Ignore all locale files of moment.js
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

            // 配置compression-webpack-plugin压缩
            new CompressionWebpackPlugin({
                algorithm: 'gzip',
                test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
                threshold: 10240,
                minRatio: 0.8
            }),
            new webpack.optimize.LimitChunkCountPlugin({
                maxChunks: 5,
                minChunkSize: 100
            })
        ]
    }
}