vue-cli4的vue.config.js非常规配置

1. sass使用dart-sass替换node-sass的配置 首先安装dart-sass

yarn add sass

css:{
    loaderOptions:{
        sass:{
            implementation:require("sass"),
            sassOptions:{
                sourceMap:false
            }
        }
    }
}

2.生产关闭sourcemap

productionSourceMap:false

3.babel-loader开启缓存

const jsRule=config.module.rule("js");
jsRule.use("babel-loader").tap(options=>{
    let options = options ? options : {};
    option.cacheDirectory = true;
    return option;
})

4.使用dayjs替换ant-design的moment.js

yarn add antd-dayjs-webpack-plugin

const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");

config
.plugin("AntdDayjsWebpackPlugin")
.use(new AntdDayjsWebpackPlugin({ preset: "antdv3" }));

5.重头戏 splitTrunks

config.optimization.splitChunks({
    chunks:"all",
    minSize:20000,
    maxAsyncRequests:6,
    maxInitialRequests:6,
    enforceSizeThreshold:50000,
    cacheGroups:{
        antd:{
            name:"chunk-antd",
            test:/[\\/]node_modules[\\/]ant-design/,
            priority:20,
            chunks:"all"
        },
        ..., //根据实际情况
        libs:{
            name:"chunk-libs",
            test:/node_modules/,
            priority:10, //优先级低于上面配置单独打包的chunk
            chunks:"initial" //打包初始依赖的第三方
        }
    }
})

6.配置webpack-bundle-analyzer分析包体积 yarn add webpack-bundle-analyzer

configureWebpack:(config)=>{
    config.plugins.push(
        new BundleAnalyzerPlugin({
            analyzerMode:"server",
            generateStatsFile:true,
            statsOptions:{ source:false },
        })
    )
}

7.输出的文件加上hash

config.output.filename = "[name]-[hash:8].js";