vue webpack 打包上传服务器优化

npm 安装

npm install compression-webpack-plugin -s
npm install script-ext-html-webpack-plugin -s

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
const zlib = require("zlib");

function resolve(dir) {
    return path.join(__dirname, dir)
}

const name = defaultSettings.title || '' //页面标题

//端口=9527 npm运行开发或npm运行开发--端口=9527
const port = process.env.port || process.env.npm_config_port || 9527 // dev port
    // All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
    publicPath: '/admin',
    outputDir: 'dist',
    assetsDir: 'static',
    lintOnSave: false /* process.env.NODE_ENV === 'development' */ ,
    productionSourceMap: false,
    devServer: {
        port: port,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
    },
    
    configureWebpack: config => {
        const baseConfig = {
            name: name,
            resolve: {
                alias: {
                    '@': resolve('src')
                }
            }
        }
        if (process.env.NODE_ENV === 'production') {
            const CompressionPlugin = require('compression-webpack-plugin')
            return {
                plugins: [
                    // 压缩代码 Brotli 性能好
                    new CompressionPlugin({
                        filename: "[path].br",
                        algorithm: "brotliCompress",
                        test: /\.(js|css|html|svg)$/,
                        compressionOptions: {
                          params: {
                            [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
                          },
                        },
                        threshold: 10240,
                        minRatio: 0.8,
                        deleteOriginalAssets: false,
                    }),
                    // 压缩代码 gzip 可同时开启
                    // new CompressionPlugin({
                    //     algorithm: 'gzip',
                    //     test: /\.js$|\.html$|.\css/, // 匹配文件名
                    //     threshold: 10240, // 对超过10k的数据压缩
                    //     minRatio: 0.8,
                    //     deleteOriginalAssets: false // true 不删除源文件 false 删除源文件
                    // })
                ],
                ...baseConfig
            }
        } 
        else {
            return { ...baseConfig }
        }
    },
    
    chainWebpack(config) {
        config.plugin('preload').tap(() => [
            {
              rel: 'preload',
              // to ignore runtime.js
              // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
              fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
              include: 'initial'
            }
        ])
        config.plugins.delete('prefetch') // TODO: need test

        // set svg-sprite-loader
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))
            .end()
        config.module
            .rule('icons')
            .test(/\.svg$/)
            .include.add(resolve('src/icons'))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon-[name]'
            })
            .end()

        // set preserveWhitespace
        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap(options => {
                options.compilerOptions.preserveWhitespace = true
                return options
            })
            .end()

        config
        // https://webpack.js.org/configuration/devtool/#development
            .when(process.env.NODE_ENV === 'development',
            config => config.devtool('cheap-source-map')
        )

        config
            .when(process.env.NODE_ENV !== 'development',
                config => {
                    config
                        .plugin('ScriptExtHtmlWebpackPlugin')
                        .after('html')
                        .use('script-ext-html-webpack-plugin', [{
                            // `runtime` must same as runtimeChunk name. default is `runtime`
                            inline: /runtime\..*\.js$/
                        }])
                        .end()
                    config
                        .optimization.splitChunks({
                            chunks: 'all',
                            cacheGroups: {
                                libs: {
                                    name: 'chunk-libs',
                                    test: /[\\/]node_modules[\\/]/,
                                    priority: 10,
                                    chunks: 'initial' // only package third parties that are initially dependent
                                },
                                elementUI: {
                                    name: 'chunk-elementUI', // split elementUI into a single package
                                    priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                                    test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
                                },
                               
                                commons: {
                                    name: 'chunk-commons',
                                    test: resolve('src/components'), // can customize your rules
                                    minChunks: 3, //  minimum common number
                                    priority: 5,
                                    reuseExistingChunk: true
                                }
                            }
                        })
                    config.optimization.runtimeChunk('single')
                }
            )
    }
}