在前端开发中，webpack 是一个非常流行的工具，它可以将多个 JavaScript 文件、CSS 文件和其他资源打包成一个或者多个文件，使我们的代码更加精简，同时也使得网站的加载速度更快。
但是随着项目变得越来越复杂，webpack 的性能问题和打包速度问题也开始出现。因此，在本文中，我们将介绍一些常用的插件和优化，以帮助开发者更好地利用 webpack，以及针对性地解决性能和速度问题。
常用插件
HtmlWebpackPlugin
HtmlWebpackPlugin 是一个生成 HTML 文件的插件，它可以根据我们的模板生成相应的 HTML 文件，并且自动将打包后的资源引入到 HTML 中。
-- -------------------- ---- ------- ----- ----------------- - ------------------------------- --- -------- - --- ------------------- --------- ---------------- -- -展开代码
ExtractTextWebpackPlugin
ExtractTextWebpackPlugin 用于将我们的 CSS 代码从 js 文件中提取出来，生成独立的 CSS 文件，以便于浏览器并发处理更多的资源。
-- -------------------- ---- ------- ----- ------------------------ - --------------------------------------- --- ------- - ------ - - ----- ---------- ---- ---------------------------------- --------- --------------- ---- -------------- -------------- -- - - -- -------- - --- --------------------------------------------- -展开代码
UglifyWebpackPlugin
UglifyWebpackPlugin 用于压缩 JavaScript 代码，减小文件体积，提高加载速度。
-- -------------------- ---- ------- ----- ------------------- - ----------------------------------- --- -------------- - - --- ------------- - ---------- ---- ---------------------- - -展开代码
ProvidePlugin
通过 ProvidePlugin 插件，我们可以指定一个全局变量，在编译时自动加载。例如，我们可以将 jQuery 库自动加载到每个模块中，而不必手动在每个模块中导入它。
-- -------------------- ---- ------- ----- ------- - ------------------- --- -------- - --- ----------------------- -- --------- ------- --------- ---------------- -------- -- -展开代码
优化
减小 bundle 文件体积
减小 bundle 文件体积是提高网站性能的重要环节。以下是一些减小 bundle 文件体积的方法。
移除未使用的代码
Tree shaking 是一个用于删除未使用代码的术语。通过 webpack 实现 tree shaking 原理是在代码层面静态分析出哪些 export 被使用并打上标记，再在代码生成的时候把没用到的 export 删除掉。
module.exports = { ... optimization: { usedExports: true } }
使用 webpack-bundle-analyzer
webpack-bundle-analyzer 是一个可视化分析工具，我们可以使用它来分析打包后的代码中，哪些模块占用了较大的文件体积。
首先，需要安装 webpack-bundle-analyzer：
npm install webpack-bundle-analyzer --save-dev
然后，在 webpack 的配置中使用插件：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; ... plugins: [ new BundleAnalyzerPlugin() ]
提高打包速度
HappyPack
HappyPack 是一个多线程插件，可以加速编译和打包速度，尤其是在处理大量代码的情况下。
-- -------------------- ---- ------- ----- --------- - --------------------- --- ------- - ------ - - ----- -------- ---- ------------------- -------- -------------- - - -- -------- - --- ----------- -------- ---------------- -- -展开代码
DllPlugin
DllPlugin 是一个用于提高打包速度的插件，主要作用是将一些不经常更新的第三方库（如 react、react-dom）提前打包好，生成一个独立的文件，然后在每次重新打包时，直接引用这个文件，这样可以提高构建速度。
首先，需要创建一个名为 vendors 的配置文件：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- -------------- - - ------ - ------- --------- ------------ -- ------- - ----- -------------------- -------- --------- ---------------- -------- ---------------- -- -------- - --- ------------------- ----- -------------------- ------- ------------------------ ----- ---------------- -- - -展开代码
然后，在 webpack 的配置中使用插件：
-- -------------------- ---- ------- ----- ------- - ------------------- --- -------- - --- ---------------------------- --------- ---------------------------- ------- ------------------------ -- -展开代码
结语
webpack 的插件和优化非常多，本文只是介绍了一部分常用的插件和优化方法，希望对大家有所帮助。对于更复杂的项目，我们需要根据自己的情况来选择合适的插件和优化方法，以提高项目的性能和速度，同时也提高我们自身的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c83422e46428fe9ee6bbb9
