webpack 4.30.0 发布，JS 模块打包器（js打包工具）

25-03-11 7

在这里，我们将给大家分享关于webpack4.30.0发布，JS模块打包器的知识，让您更了解js打包工具的本质，同时也会涉及到如何更有效地JavaScriptwebpack模块打包器如何优化前端性能、

在这里，我们将给大家分享关于webpack 4.30.0 发布，JS 模块打包器的知识，让您更了解js打包工具的本质，同时也会涉及到如何更有效地JavaScript webpack模块打包器如何优化前端性能、webpack 4.21.0 发布，JavaScript 模块打包器、Webpack 4.24.0 发布，JavaScript 模块打包器、Webpack 4.25.1 发布，JavaScript 模块打包器的内容。

本文目录一览：

webpack 4.30.0 发布，JS 模块打包器（js打包工具）
JavaScript webpack模块打包器如何优化前端性能
webpack 4.21.0 发布，JavaScript 模块打包器
Webpack 4.24.0 发布，JavaScript 模块打包器
Webpack 4.25.1 发布，JavaScript 模块打包器

webpack 4.30.0 发布，JS 模块打包器（js打包工具）

webpack 4.30.0 发布了，webpack 是一个模块打包器，主要目的是在浏览器上打包 JavaScript 文件。

此版本新特性如下：

新增 amd: false 禁用 AMD 支持
Compilation.hooks.finishModules 现在也允许异步插件
新增 output.libraryTarget: "system" 编译 SystemJs 环境

更新说明

JavaScript webpack模块打包器如何优化前端性能

一、webpack的使用背景

随着前端的项目逐渐扩大，必然会导致性能问题。尤其大大型复杂的项目中，前端业务可能因为一个小小的数据依赖，导致整个页面的卡顿甚至崩溃。
一般项目在完成后，会通过webpack进行打包，利用webpack对前端项目性能优化是一个十分重要的环节。

二、webpack如何优化

通过webpack优化前端的手段有：JS代码压缩、CSS代码压缩、Html文件代码压缩、文件大小压缩、图片压缩、Tree Shaking、代码分离、内联chunk。

1. JS代码压缩

terser是一个JavaScript的解释、绞肉机、压缩机的工具集，可以帮助我们压缩、丑化我们的代码，让bundle更小。在production模式下，webpack 默认就是使用 TerserPlugin 来处理我们的代码的。如果想要自定义配置它，配置方法如下：

const TerserPlugin = require(''terser-webpack-plugin'')
module.exports = {
    ...
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                parallel: true // 电脑cpu核数-1
            })
        ]
    }
}

2.CSS代码压缩

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

// npm install css-minimizer-webpack-plugin -D
const CssMinimizerPlugin = require(''css-minimizer-webpack-plugin'')
module.exports = {
    // ...
    optimization: {
        minimize: true,
        minimizer: [
            new CssMinimizerPlugin({
                parallel: true
            })
        ]
    }
}

3. HTML文件压缩

使用HtmlWebpackPlugin插件来生成HTML的模板时候，通过配置属性minify进行html优化。

module.exports = {
    ...
    plugin:[
        new HtmlwebpackPlugin({
            ...
            minify:{
                minifyCSS:false, // 是否压缩css
                collapseWhitespace:false, // 是否折叠空格
                removeComments:true // 是否移除注释
            }
        })
    ]
}

4. 文件大小压缩

对文件的大小进行压缩，减少http传输过程中宽带的损耗。

// npm install compression-webpack-plugin -D
new ComepressionPlugin({
    test:/\.(css|js)$/,  // 哪些文件需要压缩
    threshold:500, // 设置文件多大开始压缩
    minRatio:0.7, // 至少压缩的比例
    algorithm:"gzip", // 采用的压缩算法
})

5. 图片压缩

一般来说在打包之后，一些图片文件的大小是远远要比 js 或者 css 文件要来的大，所以图片压缩较为重要。

module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: ''file-loader'',
          options: {
            name: ''[name]_[hash].[ext]'',
            outputPath: ''images/'',
          }
        },
        {
          loader: ''image-webpack-loader'',
          options: {
            // 压缩 jpeg 的配置
            mozjpeg: {
              progressive: true,
              quality: 65
            },
            // 使用 imagemin**-optipng 压缩 png，enable: false 为关闭
            optipng: {
              enabled: false,
            },
            // 使用 imagemin-pngquant 压缩 png
            pngquant: {
              quality: ''65-90'',
              speed: 4
            },
            // 压缩 gif 的配置
            gifsicle: {
              interlaced: false,
            },
            // 开启 webp，会把 jpg 和 png 图片压缩为 webp 格式
            webp: {
              quality: 75
            }
          }
        }
      ]
    },
  ]
}

6. Tree Shaking

Tree Shaking是一个术语，在计算机中表示消除死代码，依赖于ES Module的静态语法分析（不执行任何的代码，可以明确知道模块的依赖关系）。在webpack实现Tree Shaking有两种不同的方案：useExports(通过标记某些函数是否被使用，之后通过Terser来进行优化)；sideEffects(跳过整个模块/文件)，直接查看该文件是否有副作用。

usedExports只需要将usedExports设为true；使用之后，没被用上的代码在webpack打包中会加入unused harmony export mul注释，用来告知 Terser 在优化时，可以删除掉这段代码

module.exports = {
    ...
    optimization:{
        usedExports:true;
    }
}

sideEffects配置方法在package.json中设置sideEffects属性，如果sideEffects设置为false，就是告知webpack可以安全的删除未用到的exports。如果有些文件需要保留，可以设置为数组的形式。

"sideEffecis":[
    "./src/util/format.js",
    "*.css" // 所有的css文件
]

7. 代码分离

将代码分离到不同的bundle中，之后可以按需加载，或者并行加载这些文件。默认情况下，所有的JS代码在首页全部加载，会影响到首页的加载速度。代码可以分出更小的bundle，以及控制资源加载的优先级，提供代码的加载性能。通过插件splitChunksPlugin来实现。

module.exports = {
    ...
    optimization:{
        splitChunks:{
            chunks:"all"
        }
    }
}

8. 内联chunk

可以通过InlineChunkHtmlPlugin插件将一些chunk的模块内嵌到html

const InlineChunkHtmlPlugin = require(''react-dev-utils/InlineChunkHtmlPlugin'')
const HtmlWebpackPlugin = require(''html-webpack-plugin'')
module.exports = {
    ...
    plugin:[
        new InlineChunkHtmlPlugin(HtmlWebpackPlugin,[/runtime.+\.js/]
}

9. 利用CDN加速以及提取公共第三方库

三、总结

压缩代码：删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件，利⽤ cssnano （css-loader?minimize）来压缩css
利⽤CDN加速: 在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径
Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现
Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存
提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码

到此这篇关于JavaScript webpack模块打包器如何优化前端性能的文章就介绍到这了,更多相关JavaScript webpack内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

JS前端性能优化解决内存泄漏页面崩溃
js scrollTop如何到达指定位置
JavaScript编程通过Matlab质心算法定位学习
java定位死锁的三种方法（jstack、Arthas和Jvisualvm）
js删除指定位置超链接中含有百度与360的标题
JS前端性能指标定位FMP使用详解

webpack 4.21.0 发布，JavaScript 模块打包器

webpack 4.21.0 发布了，webpack 是一个模块打包器，主要目的是在浏览器上打包 JavaScript 文件。

更新内容如下：

Features

添加 output.libraryTarget: "amd-require"，它生成 AMD require([], ...) wrapper 而不是 define([], ...) wrapper。
支持传递给 output.library 的字符串数组，它将库暴露给子属性。

Bugfixes

修复 __webpack_require__.e 在运行时被使用但并未在 bundle 定义的情况。
修复 global 类型的外部行为。

Performance

chunk graph 生成有一些性能提高。

发布公告

下载地址：

Source code(zip)
Source code(tar.gz)

Webpack 4.24.0 发布，JavaScript 模块打包器

Webpack 4.24.0 已发布，Webpack 是一个模块打包器，主要目的是在浏览器上打包 JavaScript 文件。

特性

allow to pass no dependencies to DefinePlugin runtime value

DefinePlugin.runtimeValue(() => {...}, true) is always evaluated

add module argument to DefinePlugin.runtimeValue

修复

update webassemblyjs dependency
fix bug when using entry names that look like numbers with HMR

源码下载：

Source code(zip)
Source code(tar.gz)

Webpack 4.25.1 发布，JavaScript 模块打包器

在刚刚发布 4.25.0 版本后，Webpack 又快速发布 4.25.1 对上个版本进行修复：

fix replacement of compile-time constant expression when expression is a wrapped expression (string prefix and/or suffix).

附上 4.25.0 更新内容：

Features

add format option to DllPlugin to allow generating formated manifest json
add flags to ProgressPlugin to add and remove information

entrypoint counter was added, but disabled by default to avoid breaking change

Bugfixes

fix code generation for context dependencies when replacing compile-time constant expressions
disable the effect of the ProvidePlugin for .mjs

Webpack 是一个模块打包器，主要目的是在浏览器上打包 JavaScript 文件。

源码下载：

Source code(zip)
Source code(tar.gz)

关于webpack 4.30.0 发布，JS 模块打包器和js打包工具的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于JavaScript webpack模块打包器如何优化前端性能、webpack 4.21.0 发布，JavaScript 模块打包器、Webpack 4.24.0 发布，JavaScript 模块打包器、Webpack 4.25.1 发布，JavaScript 模块打包器的相关信息，请在本站寻找。

本文标签：