Webpack 是一个强大的打包工具，它可以将各种类型的文件打包成最终的静态资源文件，这在前端开发中是非常重要的一步。但是，随着项目的扩大和复杂度的增加，打包体积也会变得越来越大，这会导致网页加载时间过长，用户的体验受到影响。在本文中，我将会分享 16 条手动优化打包体积的实践，帮助你优化你的 Webpack 打包体积，让你的项目更快、更优秀。
优化实践 1：使用正确的 Webpack 版本
Webpack 的版本更新非常频繁，每一个新版本都会带来更多的功能和优化体验。所以要保持最新版的Webpack，这能够帮助你获得最好的性能和最小的打包体积。此外，如果你正在使用 Webpack4 及以上版本，那么你可以利用它的最新功能来显著减少打包文件的大小。
优化实践 2：分离 CSS 文件
将 CSS 样式文件放入一个单独的 CSS 文件中，可以使其能够被浏览器缓存，有效的减少打包文件大小。对于 Webpack，可以使用 mini-css-extract-plugin 插件来实现:
-- -------------------- ---- ------- ----- -------------------- - ----------------------------------- -------------- - - -------- - --- ---------------------- -- ------- - ------ - - ----- --------- ---- - ---------------------------- ------------ - - - - -展开代码
优化实践 3：图片压缩
图片是占用网页更大空间的资源，也是网页加载时间最长的部分。通过压缩图片来减小文件体积是非常有效的。可以使用 imagemin-webpack-plugin 插件来自动压缩图片：
const ImageminPlugin = require('imagemin-webpack-plugin').default; module.exports = { plugins: [ new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }) ] }
优化实践 4：动态导入
动态导入能够将你的代码动态的分割成不同的块，这有助于避免将不必要的代码打包进最终文件中。
import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => { // your code here })
优化实践 5: 代码分割
对于较大的应用，使用代码分割将有助于避免将不必要的代码打包进最终文件中。可以使用 optimization.splitChunks 配置进行代码分割：
-- -------------------- ---- ------- -------------- - - ------------- - ------------ - ------- -------- -------- ------ -------- -- ---------- -- ----------------- -- ------------------- -- ----------------------- ---- ----- ----- ------------ - -------- - ----- ------------------------- --------- --- -- -------- - ---------- -- --------- ---- ------------------- ---- - - - - -展开代码
优化实践 6：使用 tree shaking
Tree shaking 是一个 JavaScript 实现的常用技术，它可以去除在代码中没有被用到的部分。可以在 Webpack 中启用 uglifyjs-webpack-plugin 来启用 tree shaking：
-- -------------------- ---- ------- ----- -------------- - ----------------------------------- -------------- - - ------------- - ---------- - --- ---------------- -------------- - --------- - ------- ----- ---------- ----- --------- ----- - - -- - - -展开代码
优化实践 7：使用 Purgecss
Purgecss 可以分析你的 CSS 以找到你没有用到的样式选择器，从而减少打包后的文件大小。可以在 Webpack 中使用 purgecss-webpack-plugin 插件启用 Purgecss：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -------------- - ----------------------------------- -------------- - - -------- - --- ---------------- ------ ----------------------- - ------ ---- -- -- - -展开代码
优化实践 8：按需加载 moment.js
Moment.js 是一个非常流行的 JavaScript 日期库，但是它也非常大，增加了网页的下载时间。可以使用 webpack-bundle-analyzer 插件分析你的打包文件，然后使用 ignorePlugin 忽略掉你的 moment.js：
-- -------------------- ---- ------- ----- -------------------- - -------------------------------------------------------- ----- ------- - ------------------- -------------- - - -------- - --- ---------------------- ------------- --------- --------------- --------- - -------------- --- --- ------------------------------------ ---------- - -展开代码
优化实践 9：使用 static-site-generator-webpack-plugin
如果你正在开发一个静态页面应用程序，那么可以使用 static-site-generator-webpack-plugin 来生成一个静态内容的压缩包：
-- -------------------- ---- ------- ----- -------------------------------- - ------------------------------------------------ -------------- - - ------ - ----- ---------------- -- -------- - --- ---------------------------------- ------ ------- ------ ---- -- - --展开代码
优化实践 10：减小 Babel 替换
Babel 是一个非常流行的 JavaScript 编译器，但是它也会导致打包文件变大。可以使用 babel-plugin-lodash 插件来减小 Babel 替换：
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin'); module.exports = { plugins: [ new LodashModuleReplacementPlugin() ] }
优化实践 11：使用 Webpack 的 DLL plugin
DLL 项可以帮助我们将变化较小的模块提前打包成单独的 dll 文件，而不必每次都进行构建，可以加速应用的构建速度，提高部署效率。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------- - - --------- -------- ------------ --------------- -------- -- -------------- - - -------- - --- ------------------- ----- ----------------------- ----- ---------------- -- -- ------ - ------- ------- -- ------- - --------- ------------ ----- -------------------- -------- -------- ---------------- - -展开代码
优化实践 12：使用压缩算法
在压缩 webpack 生成的代码时使用长时间的算法时可能会导致较慢的构建时间，并且带来较小的减少大小收益。建议选择gzip 算法进行构建。
const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { plugins: [ new CompressionPlugin() ] }
优化实践 13：减少 Webpack 的工作量
如果有不需要的文件收集、有不需要的文件打包、有不必要的检查，则可以将 Webpack 中的工作量降到最低限度。可以使用require.context 处理不需要的文件提取
const context = require.context('./src', true, /\.(js|jsx)$/); const routes = context.keys().map(key => context(key).default);
优化实践 14：配置 Module Scope hoisting
Module Scope Hoisting 是 Webpack 3及以上版本 使用的优化技术之一。通过使用 ES2015 import/export 语法，并改变输出方案，可以将程序尽可能少的运行。这可以极大的提高程序的性能。
const webpack = require('webpack'); module.exports = { plugins: [ new webpack.optimize.ModuleConcatenationPlugin() ] }
优化实践 15：使用动态支持
通过使用动态加载，避免分离的代码块转换为 webpack 的范围之后，需要具有相同的支持或者使用静态资源的详细文件。
const webpack = require('webpack'); module.exports = { plugins: [ new webpack.EnvironmentPlugin(['NODE_ENV']) ] }
优化实践 16：减少不必要的依赖项
通过维护清晰的代码，尽量减少无用的依赖包，使打包产物中的依赖尽可能少的处理，从而提升打包效率并降低打包体积。
到这里，我们已经分享了 16 条手动优化打包体积的实践。这些实践主要是在Webpack配置中进行调整，以减少资源文件的大小，提高应用程序的性能。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c3ceb9314edc2684df247b
