前言
随着前端项目复杂度的提升，Webpack 作为目前最流行的前端构建工具之一，已经成为了必备工具。在 Angular4 开发过程中，Webpack 打包是必须的一步，也会对前端项目的性能产生巨大的影响。本文将详细介绍 Angular4 + Webpack 打包优化的指南，帮助开发者更好地掌握 Webpack 打包的技能，提升项目性能。
1. 确认项目模块依赖
在优化 Webpack 打包之前，我们首先需要确认 Angular4 项目中的模块依赖，确保只有必要的模块被打包进来，避免不必要的冗余代码打包。
在 package.json 文件中，我们可以看到项目的依赖项。我们可以通过 npm ls --depth 0 命令查看当前项目所依赖的所有库，通过分析这些库，可以去掉一些不必要的库和插件，进一步提升了打包速度和减小打包的体积。
2. 开启 Tree Shaking
Tree shaking 可以帮助我们去除掉不必要的代码，以达到削减文件体积的目的。在 Angular4 + Webpack 中，我们需要开启 Tree Shaking。
在 webpack.prod.js 中，我们需要设置 optimization.minimize 和 optimization.usedExports，开启 Tree Shaking。
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
----- -------------
------------- -
--------- -----
------------ ----
-
-3. 提取公共模块
在 Angular4 项目中，会有很多公共模块，比如共享的样式文件和共享的组件等等。提取这些公共模块可以减小打包后的文件体积，并减少加载时间。
在 webpack.prod.js 中，我们可以使用 CommonsChunkPlugin 插件来提取公共模块。
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
----- -------------
------------- -
------------ -
------- -----
-
--
-------- -
--- ------------------------------------
----- --------
--
-
-4. 使用 webpack-bundle-analyzer 分析打包后的文件
在 Angular4 + Webpack 打包后，我们可以使用 webpack-bundle-analyzer 工具，分析打包后的文件，找出可能的优化点。webpack-bundle-analyzer 可以生成一个网页报告，展示打包后的文件体积和依赖情况，可以很清晰地看到哪些模块占用了较大的空间。
使用方式：
- 安装 webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
- 在 webpack.prod.js 中添加插件：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}5. 压缩代码
在 Angular4 + webpack 打包后，我们可以继续压缩代码，以缩减文件体积。
在 webpack.prod.js 中设置 optimization.minimize 为 true，即可启动压缩代码功能。
const webpack = require('webpack');
module.exports = {
mode: 'production',
optimization: {
minimize: true
}
}结论
Webpack 打包优化对于 Angular4 项目产生的影响非常大，一个好的打包配置可以将性能问题最小化。我们需要精益求精，针对性地优化每一个打包环节，以达到减小文件体积，提高网站性能，提升用户体验的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67235bcd2e7021665e0fbe5d