vue.config.js

缓存问题

1. 时间戳

const Timestamp = new Date().getTime();
#css
config.plugin('extract-css').tap(() => [{
    filename: `css/[name].${Timestamp}.css`,
    chunkFilename: `css/[name].${Timestamp}.css`
}])

#js
output: {
    // 输出重构  打包编译后的 文件名称  【模块名称.时间戳】
    filename: `public/js/[name].${Timestamp}.js`,
    chunkFilename: `public/js/[name].${Timestamp}.js`
},

2. hot-hash-webpack-plugin

yarn add hot-hash-webpack-plugin
const HotHashWebpackPlugin = require('hot-hash-webpack-plugin')
config.plugin('hotHash').use(HotHashWebpackPlugin, [{ version: '1.0.0' }])

打包chunk-vendors 过大

1. externals 构建代码的时候独立出来

externals: {
    'echarts': 'echarts',
    ...
}

2.zip 压缩

const productionGzipExtensions = ['js', 'css']
plugins: [
    new CompressionWebpackPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240, // 只有大小大于该值的资源会被处理 10240
        minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
        deleteOriginalAssets: false // 删除原文件
    }),
]

3.optimization

optimization: {
    splitChunks: {
        cacheGroups: {
            vendors: {
                // 自定义打包模块
                name: 'chunk-vendors', // 打包后的文件名
                test: /[\\/]node_modules[\\/]/, // 匹配对应文件
                priority: 1, // 优先级，先打包到哪个组里面，值越大，优先级越高
                // initial: 对于匹配文件，非动态模块打包进该vendor,动态模块优化打包
                // async: 对于匹配文件，动态模块打包进该vendor,非动态模块不进行优化打包
                // all: 匹配文件无论是否动态模块，都打包进该vendor
                chunks: 'initial',
                enforce: true, // true/false。为true时，忽略minSize，minChunks
                reuseExistingChunk: true
            },
            ...
        }
    }
}

正式环境删除控制台日志

config.optimization
.minimize(true)
.minimizer('terser')
.tap((args) => {
    let { terserOptions } = args[0]
    terserOptions.compress.drop_console = true
    terserOptions.compress.drop_debugger = true
    return args
})