1. 跟上技术的迭代（Node，Npm，Yarn，Webpack）#
尽可能去使用新版本的工具，包括 Node，Npm，Yarn，Webpack 等。因为新版本的工具都有性能的优化或者提升，可以提高 Webpack 编译和打包的速度。
2. 尽可能少的模块上应用 Loader#
Loader 解析的模块越多，消耗的性能越大，尽可能少的模块上应用 Loader。在 Loader 中使用exclude选项排除不需要解析的模块，或者使用include选项指定需要解析的模块。
3. Plugin 尽可能精简并确保可靠#
插件非常消耗性能，尽可能少使用插件，不使用一些没必要的插件。尽量使用官方网站推荐或者社区认可的插件，这些插件都是经过官方测试后或者社区多次验证的，性能都比较好。
另外，在开发环境中没有必要使用压缩代码或者提取 CSS 代码等一些优化类型的插件，这些插件会额外消耗性能。
4. resolve 参数合理配置#
使用resolve的extensions配置后缀名字后，在引入所配置的文件时可以不写文件后缀，非常方便。
module.exports = {
resolve: {
extensions: [".js", ".vue", ".json"],
},
};比如上面配置extensions选项后，在引入文件时，Webpack 会先去查找js类型文件，找不到再去查找vue类型的文件，最后查找json类型的文件。如果把所有的后缀都配置上去，比如各种样式文件或者图片文件，Webpack 会一个个去找出这些类型的文件，会非常消耗性能，应该只配置常用的文件。比如js文件或者vue文件。
5. 使用 DllPlugin 提高打包速度#
使用 DllPlugin 先提前打包好一些不经常变化的第三方库，然后在后面项目打包的时候就不需要打包这些库了，而是直接引用它们，这样可以有效提升打包速度。
6. 控制包文件大小#
- 不要引入一些无用的包
- 使用 tree shaking 剔除一些没用的模块
- 使用 code split 拆分代码
7. 多进程打包#
- thread-loader 多进程打包
- parallel-webpack 多页面打包
- Happypack 打包
8. 合理使用 SourceMap#
不同的 SourceMap 配置对打包速度有不同的影响，在开发环境和生产环境选用适当的 SoucreMap。
推荐在开发环境建议使用cheap-module-eval-source-map模式，更新速度比较快，提示信息也比较全面。在生产环境建议使用cheap-module-source-map模式，提示信息也比较全面。
9. 结合 stats 分析打包结果#
通过一些打包分析工具得出哪些依赖包打包时间比较长或者体积比较大，然后针对性的去优化。常用的分析工具有官方提供的analyse、社区提供的webpack-bundle-analyzer、也可以借助 Chrome 浏览器来分析打包后的代码。