利用webpack来优化前端性能（提高性能和体验）

用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效;

• 对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩;
• 优化图片，对于小图可以使用 base64 的方式写入文件中;
• 按照路由拆分代码，实现按需加载;
• 给打包出来的文件名添加哈希，实现浏览器缓存文件;
• 压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUglifyPlugin来压缩JS文件， 利用cssnano（css-loader?minimize）来压缩css;
• 利用CDN加速。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于output参数和各loader的publicPath参数来修改资源路径;
• 删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数--optimize-minimize来实现;使用 ES6 模块来开启 tree shaking，这个技术可以移除没有使用的代码;
• 提取公共代码;CommonsChunkPlugin;

提高构建（优化打包）速度【要点】

• 使用Tree-shaking和Scope Hoisting来剔除多余代码;

• 多入口情况下，使用CommonsChunkPlugin来提取公共代码；通过externals配置来提取常用库

• 减少文件搜索范围**

  • 比如通过别名
  • loader 的 test，include & exclude

• Webpack4 默认压缩并行

• babel 也可以缓存编译；通过cacheDirectory选项开启；loader: 'babel-loader?cacheDirectory'

• 利用DllPlugin和DllReferencePlugin预编译资源模块 通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过DllReferencePlugin将预编译的模块加载进来。

• 使用Happypack 实现多线程加速编译

• 使用webpack-uglify-parallel来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度

• 修改source-map配置;

  productionSourceMap: false,
  config.when(!isProd, config => config.devtool('cheap-source-map'))