webpack|如何?webpack来优化前端性能（）性能优化|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", } }

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