webpack优化篇

优化打包速度，我们先分析哪些地方可能会影响到我们的打包速度

• 我们在进行打包的时候需要获取到所有的依赖模块
• 解析所有的依赖模块，解析成浏览器能够识别的代码
• 将所有的依赖打包成一个文件，需要对代码进行压缩
• 二次打包时间，文件修改的时候需要重新打包
• 运行在 Node.js 之上的 webpack 是单线程模式的，逐个文件进行解析
• webpack 缓存，将结果缓存到磁盘，提高第二次构建的速度
• 代码压缩（ParallelUglifyPlugin 插件实现了多线程压缩）
• 优化搜索时间- 缩小文件搜索范围 减小不必要的编译工作（loader配置test 、 include 、 exclude命中规则， alias配置）

优化包体积

• 压缩js （ParallelUglifyPlugin）
• 提取css，把css文件提取到单独的css样式文件中，因为css和js并行加载的 （mini-css-extract-plugin）
• 压缩css （optimize-css-assets-webpack-plugin）

首屏优化

• cdn缓存
• tree-shaking
• 提取公用的代码（SplitChunksPlugin）
• 按需加载