mode: "production" 为什么没有压缩代码 和 没有 tree-shaking

代码压缩坑

正常情况下，如果我们配置生成环境，webpack会自动帮js压缩和 tree-shaking

    module.exports = merge(commonConfig, {
        mode: 'production'
        // ...code
        optimization: {}
    }

但是通常情况下 我们会使用 css压缩后 npm install optimize-css-assets-webpack-plugin --save-dev

    module.exports = merge(commonConfig, {
        mode: 'production'
        // ...code
        optimization: {
            minimizer: [new OptimizeCSSAssetsPlugin({})]
        }
    }

用了css压缩后，我们发现，js不压缩了

官网中 让我们在 package.json 中添加 sideEffects: false 能实现 tree-shaking

    {
        "name": "your-project",
        "sideEffects": false
    }

但是 我们使用了 css 压缩 js 也没有压缩 和 tree-shaking 这个大坑 让我搞了半天，但是我们可以通过uglifyjs-webpack-plugin 这个插件实现

    npm install uglifyjs-webpack-plugin --save-dev

    module.exports = merge(commonConfig, {
        mode: 'production'
        // ...code
        optimization: {
            minimizer: [new OptimizeCSSAssetsPlugin({}), new UglifyJsPlugin()]
        }
    }

扩展

Tree Shaking 可以将多余的代码剔除掉 只支持Es module (import...from...)，es module 是静态引入，而 commonjs (const ...= require(...) ) 是动态引入的方式