前端如何使用webpack优化性能

一、写在前面
面试中问道webpack如何来优化前端性能，此时我们该如何回答，下面将总结一下。
二、优化方案
2.1、压缩代码
删除多余代码，注释，简化代码的写法等等方式。可以利用webpack的uglifyJsPlugin和ParallelUglifyPlugin来压缩js文件，利用cssnano来压缩css资源。
2.2、利用CDN加速：在构建过程中，将引用的静态资源修改为CDN上对应的路径。我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。

configureWebpack: {
    externals: {
        "vue": "Vue",
        "vue-router": "VueRouter",
        "axios": "axios",
        "moment": "moment",
        "element-ui": "ELEMENT",
    }
}

2.3、Tree shaking:将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现。
2.4、Code Splitting将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存。例如vue中的异步组件就是按需加载。
2.5、提取公共第三⽅库: 提取公共第三⽅库:来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码。