主页 > 其他  > 

webpack的性能优化（二）——减少打包体积


        优化webpack性能时，主要集中在两个方面：优化构建后的结果和优化构建时的速度。前一篇文章已经介绍了如何通过webpack的分包来优化构建后的结果。而在本篇文章中，我们将从减少打包体积的角度来探讨。

1.通过CDN链接引入第三方库

        CDN是指通过相互连接的网络系统，利用最靠近每个用户的服务器，以更快、更可靠的方式将音乐、图片、视频、应用程序以及其他文件发送给用户，从而实现高性能、可扩展性和低成本的网络内容传递。

平时在开发中我们使用CDN主要有两种方式：

将打包的所有静态资源，放到CDN服务器。让用户所有资源都是通过CDN服务器加载。通过利用知名第三方库的CDN，我们可以避免将这些库打包到我们的项目中，从而降低打包体积。

本文的重点是减少打包体积，因此我们将重点讨论第二种方式。

步骤一：首先通过在webpack.config.js中的配置排除对这些库的打包 // webpack.config.js const { resolve } = require('path'); module.exports = { entry: './src/main.js', output: { filename: 'bundle.js', path: resolve(__dirname, 'build'), }, // 排除打包dayjs externals: { lodash: '_', }, };

强调：在externals这个对象中

lodash 作为属性名（key）： 这表示当你在代码中导入 lodash 时，实际上不会将 lodash 包含在你的输出文件中，而是期望它在运行时从外部引入。'_' 作为属性值（value）： 假定在运行环境中已经有一个全局的 _ 对象或者模块 

外部扩展(Externals) | webpack 中文文档 (docschina.org)

步骤二：在html模块中，加入第三方库的CDN服务器地址 推荐一个国内比较好用的CDN是 bootcdn <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 导入第三方库的CDN --> <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script></script> </head> <body></body> </html> 2. 代码压缩 2.1 JavaScript的压缩

        压缩JavaScripte文件可以使用Terser压缩工具，Terser可以帮助我们压缩、丑化我们的代码，让我们的bundle变得更小。webpack v5 开箱即带有最新版本的 terser-webpack-plugin。

        在Webpack中，有一个名为minimizer属性，它在生产模式下默认开启，使用TerserPlugin来处理代码。这意味着Webpack会自动使用TerserPlugin来压缩和优化JavaScript代码，以减小文件大小并提高性能。

        如果你不满意默认配置，你可以自己创建TerserPlugin的实例，并覆盖相关配置。这允许你根据项目的需求自定义代码压缩和优化，使Webpack配置变得灵活而适应各种场景。总之，minimizer属性允许你控制生产模式下的代码压缩，提供了定制化的选项以满足你的需求。

optimization: { minimize: true, minimizer: [new TerserPlugin({ extractComments: true, //默认值为true，表示会将注释抽取到一个单独的文件中； parallel: true, //使用多进程并发运行提高构建的速度，默认值是true，并发运行的默认os.cpus().length - 1； //在这里设置tenser相关的配置 terserOptions: { // 设置压缩相关的代码 compress:{ ecma: 5, // 设置输出所需的EcmaScript标准版本 unused: false // 是否删除未引用的函数和变量 arrows: true, //class或者object中的函数，转换成箭头函数 dead_code: true //移除不可达的代码（tree shaking） }, toplevel: true, // 是否转换顶级作用域中声明的名称。 keep_classnames: true, // 保留类名, keep_fnames: true // 保留函数的名称 } })], },

这里面的配置非常多，具体可以看terser文档 

2.2 css的压缩

压缩CSS通常是去除无用的空格等，，因为很难去修改选择器、属性的名称、值等。压缩CSS可以使用webpack的一个插件：css-minimizer-webpack-plugin

第一步，安装 css-minimizer-webpack-plugin： npm install css-minimizer-webpack-plugin -D 第二步，在optimization.minimizer中配置 optimization: { minimizer: [ new cssMinimizerPlugin({ parallel: true }) ], },

2.3 HTTP的压缩          HTTP压缩 是一种内置在 服务器 和 客户端 之间的，以改进传输速度和带宽利用率的方式； HTTP压缩的流程: 第一步：HTTP数据在服务器发送前就已经被压缩了；（可以在webpack中完成） 第二步：兼容的浏览器在向服务器发送请求时，会告知服务器自己支持哪些压缩格式；

第三步：服务器在浏览器支持的压缩格式下，直接返回对应的压缩后的文件，并且在响应头中告知浏览器； 第一步对HTTP进行压缩怎么实现 ？ 2.3.1 Webpack对文件压缩 可以使用 CompressionPlugin 。 第一步，安装CompressionPlugin： npm install compression-webpack-plugin -D 第二步，使用 CompressionPlugin 即可 plugins: [ // 生产环境 new CompressionPlugin({ test: /\.(css|js)$/i, // 匹配哪些文件需要压缩 threshold: 0, // 设置文件从多大开始压缩 minRatio: 0.8, // 至少的压缩比例 algorithm: "gzip", // 采用的压缩算法 // exclude // include }), ] 2.3.2 HTML文件中代码的压缩 我们之前使用了  HtmlWebpackPlugin  插件来生成HTML的模板，事实上它还有一些其他的配置： inject：设置打包的资源插入的位置 true、 false 、body、head cache：设置为true，只有当文件改变时，才会生成新的文件（默认值也是true） minify：默认会使用一个插件html-minifier-terser plugins: [ new HtmlWebpackPlugin({ template: "./index.html", // inject: "body" cache: true, // 当文件没有发生任何改变时, 直接使用之前的缓存 minify: isProduction ? { removeComments: false, // 是否要移除注释 removeRedundantAttributes: false, // 是否移除多余的属性 removeEmptyAttributes: true, // 是否移除一些空属性 collapseWhitespace: false, removeStyleLinkTypeAttributes: true, minifyCSS: true, minifyJS: { mangle: { toplevel: true } } }: false }), ], 5. Tree Shaking         Tree Shaking  是一个术语，在计算机中表示 消除死代码（dead_code） ，最早的想法起源于LISP，用于 消除未调用的代码 （纯函数无副作用，可以放心的消除，这也是为什么要求我们在进 行函数式编程时，尽量使用纯函数的原因之一），后来 Tree Shaking 也被应用于其他的语言，比如JavaScript、Dart； 5.1 JavaScript的Tree Shaking 对JavaScript进行Tree Shaking是源自打包工具rollup； 这是因为Tree Shaking依赖于ES Module的静态语法分析（不执行任何的代码，可以明确知道模块的依赖关系）； webpack2正式内置支持了ES2015模块，和检测未使用模块的能力； 在webpack4正式扩展了这个能力，并且通过 package.json的 sideEffects属性作为标记，告知webpack在编译时， 哪里文件可以安全的删除掉； webpack5中，也提供了对部分CommonJS的Tree Shaking的支持； https://github.com/webpack/changelog-v5#commonjs-tree-shaking 5.2 webpack实现Tree Shaking

事实上webpack实现Tree Shaking采用了两种不同的方案：

usedExports：通过标记某些函数是否被使用，之后通过Terser来进行优化的； sideEffects：直接查看该文件是否有副作用，如果没有副作用，并且没有被使用则直接删除该模块； 5.2.1 usedExports 将mode设置为development模式： 为了可以看到 usedExports带来的效果，我们需要设置为 development 模式 因为在 production 模式下，webpack默认的一些优化会带来很大额影响。 设置 usedExports 为true和false对比打包后的代码： 在usedExports设置为true时，会有一段注释：unused harmony export mul； 这段注释的意义是什么呢？告知Terser在优化时，可以删除掉这段代码； 这个时候，我们将  minimize 设置true（利用Terser对JavaScript进行压缩）： usedExports设置为false时，mul函数没有被移除掉； usedExports设置为true时，mul函数被移除掉； 所以， usedExports 实现 Tree Shaking 是结合 Terser 来完成的。 5.2.2 sideEffects sideEffects 用于告知webpack compiler哪些模块是没有有副作用的： 副作用的意思是这里面的代码有执行一些特殊的任务（比如这个模块中修改了全局变量），不能仅仅通过export来判断这段代码的意义； 在 package.json 中设置 sideEffects 的值： 将sideEffects设置为false，就是告知webpack可以安全的删除未用到的exports； 如果有一些模块是有副作用，一些模块是没有副作用的，可以设置为数组；

package.json

"sideEffects": false, // 全部的模块都没有副作用 "sideEffects": ["./src/format.js", "*.css" ], //这两个文件没有副作用在没有被使用时可以放心的删除 比如我们有一个format.js、style.css文件： 在sideEffects中指定这两个文件无副作用；该文件在导入时没有使用任何的变量来接受，这两个文件的内容没有被其他模块使用； 那么打包后的文件，不会保留format.js、style.css相关的任何代码； 还可以通过 module.rules 来配置： module: { rules: [ { test: /\.css/i, use: [ isProduction ? MiniCssExtractPlugin.loader: "style-loader", "css-loader"], sideEffects: true }, ], },

参考:

webpack性能优化（二）：减少打包体积 - 掘金 (juejin.cn)

标签：

webpack的性能优化（二）——减少打包体积由讯客互联其他栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“webpack的性能优化（二）——减少打包体积”

上一篇
haiku实现三角乘法模块

下一篇
C#--核心

推荐文章