vue-cli3.0项目打包优化

vue3.0项目打包

项目完成编写后,运行npm run build

项目优化:

1. 在项目根目录下(跟package.json同级)新增vue.config.js
2. 安装项目压缩插件 npm install compression-webpack-plugin --save-dev

const FileManagerPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
module.exports = {
    assetsDir: 'static',
    parallel: false,
    publicPath: './',
    chainWebpack: config => {
        config.plugins.delete('prefetch') // vue3 会默认开启预加载  需要把他关掉
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === "production") {
            config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
            return {
                plugins: [new FileManagerPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//匹配文件名
                    threshold: 10240,//对10K以上的数据进行压缩
                    minRatio: 0.8,
                    deleteOriginalAssets:false,//是否删除源文件
                })]
            }
        }
    },
    productionSourceMap: process.env.NODE_ENV === 'production' ? false : true  // 不生产map文件
}