构建优化（webpack 优化）

已于 2022-06-01 09:34:19 修改
阅读量2.1k 收藏 3
点赞数
分类专栏： 性能优化 文章标签： webpack javascript 前端
于 2022-03-10 17:30:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38689395/article/details/123406997
版权

webpack 优化配置

webpack4 引入了 mode 模式，可以配置开发和生产模式，就可以使用一些已经默认好的插件帮我们达到想做的效果

Tree-shaking

  • 上下文未用到的代码（dead code）

  • 给予 ES6 import export

    Tree-shaking 基础：无论是自己还是第三方，必须是模块化的，要基于 ES6 import export 导入导出的形式才可以，生产模式会默认启动 Tree-shaking，主要依赖于 TerserPlugin 插件

    Tree-shaking 原理：从 index.js 开始，去看引用了哪些东西，进一步分析所有引入的包或模块里又引用了哪些模块或其他一些包，最后会把需要的东西都留下

  • package.json 中配置 sideEffects

    因为它的实现是基于一定的规则，不过在 JS 里，可能会涉及到修改全局作用域（window 对象），如果把这个 shake 掉，代码就会出现问题，这时就需要使用 sideEffects 来告诉 webpack 哪些文件不需要 shake

    "sideEffects": [
  "*.css"
]

  • 注意 Babel 默认配置的影响

    presets 就是把常用的 babel 插件做了一个集合。它有个问题：在转码时会把 ES6 模块化的语法转换成其他语法，我们希望保留 ES6 模块化语法，所以要加上 modules: false，这样 Tree-shaking 才能起到作用

    module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
        targets: {
          browsers: ['>0.25%'],
        },
        useBuiltIns: 'usage',
        bugfixes: true,
      },
    ],
    '@babel/preset-react',
  ],
  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime'],
}

JS 压缩

再来一打Webpack面试题

  • uglifyjs-webpack-plugin：不支持 ES6 压缩 (Webpack4 以前)

    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
}

  • terser-webpack-plugin：支持压缩 ES6 (Webpack4)

    terser 无论从销量还是效果上都比 uglifyjs 好，所以 terser 后面座位生产模式下默认的压缩插件

    const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  optimization: {
    minimizer: [new TerserPlugin()],
  },
}

作用域提升

  • 代码体积减小

    减少调用关系逻辑上的代码，把一些函数进行合并

  • 提高执行效率

    要进行引用的话，回花时间进行查找

  • 同样注意 Babel 的 modules 的配置

    需要加上 modules: false 的配置

没有启用作用域提升的话，会把这两个模块打成单独的模块，当其中一个依赖到另一个时，会把依赖到的模块 require 进来，再通过 require 进来的模块进行调用

启用作用域提升，会做一个合并和分析，发现有这种依赖调用时，试图把依赖合并到调用里，最终变得更加精简

/**************** util.js ********************/
export default 'Hello,Webpack';

/**************** index.jsx ******************/
import str from './util';
console.log(str);

/***************** 没有 scope hoisting, webpack 打包后 *******************/
[
  (function (module, __webpack_exports__, __webpack_require__) {
    var __WEBPACK_IMPORTED_MODULE_0__util_js__ = __webpack_require__(1);
    console.log(__WEBPACK_IMPORTED_MODULE_0__util_js__["a"]);
  }),
  (function (module, __webpack_exports__, __webpack_require__) {
    __webpack_exports__["a"] = ('Hello,Webpack');
  })
]
/************************************/

/***************** 有 scope hoisting, webpack 打包后 ********************/
[
  (function (module, __webpack_exports__, __webpack_require__) {
    var util = ('Hello,Webpack');
    console.log(util);
  })
]
/************************************/

Babel 优化配置

  • 在需要的地方引用 polyfill
  • 辅助函数的按需引入
  • 根据目标浏览器按需转换代码

按需加载 polyfill

  • polyfill 是兼容旧浏览器去进行新功能或新规范的实现

    由于这个比较大，需要把所有涉及到的东西都引进来，但我们用到的可能是其中比较小的部分，这时配置 useBuiltIns: 'usage' 即可

    通过 targets: { browsers: ['>0.25%'] } 来对市场份额超 0.25% 的浏览器进行支持。browserlist

    module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
        targets: {
          browsers: ['>0.25%'],
        },
        useBuiltIns: 'usage',
        bugfixes: true,
      },
    ],
    '@babel/preset-react',
  ],
  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime'],
}

辅助函数的按需引入

  • 声明一个 class，babel 转码后如下图：

webpack 依赖优化

noParse（不解析）

  • 提高构建速度

  • 直接通知 webpack 忽略较大的库

    通常是第三方的一些类库，一般是比较大的库，且没用模块化的方式去编写，那么它本身也不会有外部的依赖，所以我们就可以不对它进行解析

  • 被忽略的库不能有 import、require、define 的引入方式

module: {
  noParse: /lodash/, // loadsh比较独立
  noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/, // vue-cli里的配置
}

DllPlugin

  • 避免打包时对不变的库重复构建

    比如：react 和 react-dom 其实从开始构建项目开始到最后上线都不太可能变了，我们可以对其进行动态链接库的引用，不再重复构建

  • 提高构建速度

  • 应用场景

    生产环境应用的可能性比较小，因为生产环境不会经常打包，慢一点也不会介意

/* package.json */
{
  "scripts": {
    "dll-build": "cross-env NODE_ENV=production webpack --config webpack.dll.config.js"
  }
}

/* webpack.dll.config.js */
const path = require('path')
const webpack = require('webpack')
module.exports = {
  mode: 'production',
  entry: {
    react: ['react', 'react-dom'],
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dll'),
    library: '[name]',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, 'dll/[name].manifest.json'),
    }),
  ],
}

/* webpack.config.js */
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
module.exports = smp.wrap({
  plugins: [
    /* 动态链接库引用 */
    new DllReferencePlugin({
      manifest: require(`${__dirname}/dll/react.manifest.json`),
    }),
  ],
}

webpack 细节优化

代码拆分

  • 把单个 bundle文件拆分成若干个 bundles/chunks
  • 缩短首屏加载时间

webpack 代码拆分方法：

  • 手工定义入口

  • splitChunks 提取公有代码，拆分业务代码与第三方库

    1. 把我们代码中重复使用的东西提取出来
    2. 把我们这个业务逻辑与第三方依赖进行拆分

    webpack 处理文件路径时，它们始终包含 Unix 系统中的 / 和 Windows 系统中的 \，所以会在前面加上 [\\/]

    chunks：有效值为 all、async、initial，initial 是同步加载，async 是异步加载

    minChunks：拆分前必须共享模块的最小 chunks 数

    module.exports = smp.wrap({
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: 'vendor',
          test: /[\\/]node_modules[\\/]/,
          minSize: 0,
          minChunks: 1,
          priority: 10,
          chunks: 'initial',
        },
        common: {
          name: 'common',
          test: /[\\/]src[\\/]/,
          chunks: 'all',
          minSize: 0,
          minChunks: 2,
        },
      },
    },
  },
})

  • 动态加载

    <Suspense fallback={<div>Loading...</div>}>
  <Card
    key={panel.name}
    image={panel.image}
    title={panel.name}
    route={panel.route}
    description={panel.body}
  />
</Suspense>

资源压缩

  • Terser 压缩 JS
  • mini-css-extract-plugin 压缩 CSS
  • HtmlWebpackPlugin-minify 压缩 HTML

webpack4 mode

// webpack.production.config.js
module.exports = {
  mode: 'production',
  performance: {
    hints: 'warning',
  },
  output: {
    pathinfo: false,
  },
  optimization: {
    namedModules: false,
    namedChunks: false,
    nodeEnv: 'production',
    flagIncludedChunks: true,
    occurrenceOrder: true,
    sideEffects: true,
    usedExports: true,
    concatenateModules: true,
    splitChunks: {
      hidePathInfo: true,
      minSize: 30000,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
    },
    noEmitOnErrors: true,
    checkWasmTypes: true,
    minimize: true,
  },
  plugins: [
    new TerserPlugin(/* ... */),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
}

mini-css-extract-plugin 压缩 CSS

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[id].[chunkhash:8].css',
    }),
    new OptimizeCssAssetsPlugin({
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],
      },
      canPrint: true,
    }),
  ]
}

HtmlWebpackPlugin-minify 压缩 HTML

minification

{
  collapseWhitespace: true, // 移除空格、换行符
  keepClosingSlash: true, // 保留元素的末尾斜杠
  removeComments: true, // 移除注释
  removeRedundantAttributes: true, // 移除冗余属性（默认值）
  removeScriptTypeAttributes: true, // 移除script标签中的type属性
  removeStyleLinkTypeAttributes: true, // 移除style标签中的type属性
  useShortDoctype: true // 使用html5短的描述方式
}

资源持久化缓存

  • 每次打包的资源文件有唯一的 hash 值

  • 修改后只有受影响到的文件 hash 变化

  • 充分利用浏览器缓存

    hash 特点：离散唯一的值，如果内容不变，计算出来的值也不变

    contenthash 会根据内容生成 hash，当只改 JS 时，进行重新打包后，CSS 就会保持原有的 hash 值。当更新部署时，就可以充分利用浏览器缓存，这样就可以保证用户体验且能进行一个平稳的更新过度

module.exports = {
  output: {
    path: `${__dirname}/build`,
    filename: '[name].[hash].bundle.js',
    chunkFilename: '[name].[chunkhash:8].bundle.js',
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
      chunkFilename: '[id].[contenthash:8].css',
    }),
  ]
}

应用大小检测与分析

  • Stats 分析与可视化图
  • webpack-bundle-analyzer 进行体积分析
  • speed-measure-webpack-plugin 速度分析

webpack-chart

通过：webpack --profile --json > stats.json 生成 stats.json文件，之后将这个上传到这个网站即可

这个可能还是不够细，想进一步分析可以使用 bundle-analyzer 工具实现，这里使用 source-map-explorer 进一步分析

npm i source-map-explorer

这个分析不是基于我们的 bundle 文件，而是基于 sourcemap，需要需要生成 sourcemap

/* package.json */
{
  "scripts": {
    "analyze": "source-map-explorer 'build/*.js'"
  },
}

/* webpack.config.js */
module.exports = smp.wrap({
  mode: 'production',
  devtool: 'source-map'
}

官方推荐的 bundle-analyzer 可以得到可视化图，不过相比 source-map-explorer 相比，它只能看个大概，少一些具体内容

速度分析可以使用speed-measure-webpack-plugin，运行 npm run build 即可看到所有 plugins 和所有 loaders 的使用情况

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()

module.exports = smp.wrap({...})

React 按需加载实现方式

  • React router 基于 webpack 动态引入
  • 使用 Reloadable 高级组件
import loadable from '@loadable/component'

// 使用React-Loadable动态加载组件
const LoadableAbout = loadable(() => import('./About.jsx'), {
  fallback: '<div>loading...</div>',
})
class App extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={LoadableAbout} />
        </Switch>
      </Router>
    )
  }
}

代码拆分最初是为了解决一个过大请求的问题

  • 通过一个请求，把整个包加载到首页，这时网络开销相对少但是包体积大，所以下载耗时长

  • 我们可以把较大的包做拆解，拆分成若干个小包，小包只有被调用时才会加载（按需加载）

    假如拆分水平定义到组件，那所有组件都被拆分成一个独立的模块，就会有很多 bundle 或 chunk，那就要发起若干个请求，开销会更大

  • 通常最合理的方式就是按照路由进行按需加载，而当页面上一些组件在不同路由页面会被进行复用时，才把组件单独进行拆解

雪急飞绪
关注
专栏目录
terser-webpack-plugin：Terser插件
02-06
terser-webpack-plugin 该插件使用来缩小JavaScript。 入门 如果您使用的是webpack v5或更高版本，则无需安装此插件。 Webpack v5随附了最新的terser-webpack-plugin 。 使用Webpack v4，您必须安装terser-webpack-plugin v4。 首先，您需要安装terser-webpack-plugin ： $ npm install terser-webpack-plugin --save-dev 然后将插件添加到您的webpack配置中。 例如： webpack.config.js const Ter
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
08-27
基于DllPlugin和DllReferencePlugin的webpack构建优化 在现代Web开发中，构建速度是一个非常重要的问题，特别是在开发hybrid App时，构建次数会增多，这将严重影响开发效率。因此，优化构建速度是非常必要的。本文...
webpack4打包优化
cjvalue的博客
08-07 1001
layout: post title: webpack4打包优化 categories: webpack tags: webpack4打包优化 针对vue cli3.0+，webpack4.0+，nodejs10.0+ 这几个版本打包优化 一、量化、分析 speed-measure-webpack-plugin 时间分析 测量出在你的构建过程中，每一个 Loader 和 Plugin 的执行时长 而它的使用方法也同样简单，如下方示例代码所示，只需要在你导出 Webpack 配置时，为你的原始配置包一层 .
Webpack 4 优化指南：提升构建性能与加载速度
最新发布
why404
09-26 636
在以前的前端开发中，Webpack 是为不可或缺的构建工具，而且有大量的项目是使用Webpack4 ，然而，随着项目规模的扩大，构建时间和包体积可能会成为瓶颈。本文将探讨一些有效的优化策略，帮助提升 Webpack 4 的构建性能和加载速度。
terser-webpack-plugin
热门推荐
qq_26642611的博客
09-10 1万+
webpack打包时自动去除console.log——terser/terser-webpack-plugin terser 由于老牌工具uglify不支持es6，且uglify-es不再更新，我们选择terser作为js代码压缩工具。 # 全局安装terser命令行工具 npm install -g terser # 使用terser terser ./foo.js -c pure_funcs=[console.log],toplevel=true -m -o bar.js # -c即compress表示
Webpack常用插件之TerserWebpackPlugin
sjs1995的博客
11-06 6096
TerserWebpackPlugin 该插件使用 terser 来压缩 JavaScript。 webpack.config.js const TerserPlugin = require('terser-webpack-plugin'); module.exports = { optimization: { minimize: true, minimizer: [new TerserPlugin({ test: /\.js(\?.*)?$/i, //匹配参与
webpack常用构建优化策略小结
10-15
总结起来，webpack的构建优化策略主要涵盖了精确控制loader规则、减少不必要的模块查找范围、合理配置模块解析扩展名、采用DLL技术预编译依赖、以及使用多进程插件来加速loader编译任务等。掌握这些策略对于提升项目...
浅谈一个webpack构建速度优化误区
10-16
在本篇关于Webpack构建速度优化的文章中，我们可以了解到一些关键知识点和常见误区，以下详细展开： Webpack构建速度优化误区 开发者在利用Webpack进行项目构建时，常常会遇到一些优化构建速度的误区。比如，在本例...
TerserWebpackPlugin详解
高山景行，一尘不染
02-01 7089
TerserWebpackPlugin，此文章来自于github翻译来，仅供参考，具体配置需要结合自己的技术框架配置（vue/react等）
webpack terser-webpack-plugin 不打包注释及log
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
07-10 574
打包时，不打包项目中的注释及log，debugger等
02-TerserWebpackPlugin：优化你的 JavaScript 代码
weixin_46002095的博客
05-30 2127
TerserWebpackPlugin 是一个 Webpack 插件，用于通过 Terser 压缩和优化 JavaScript 代码。Terser 是一个用于 ES6+ 代码的 JavaScript 压缩工具，它基于 UglifyJS，但添加了对现代 JavaScript 特性的支持。TerserWebpackPlugin 利用 Terser 的强大功能，帮助开发者生成更小、更高效的 JavaScript 文件，从而提升网页加载速度和用户体验。
Terser Webpack Plugin 使用教程
gitblog_00495的博客
08-10 460
Terser Webpack Plugin 使用教程 terser-webpack-pluginTerser Plugin项目地址:https://gitcode.com/gh_mirrors/te/terser-webpack-plugin 目录结构及介绍 Terser Webpack Plugin 是一个用于压缩 JavaScript 代码的 Webpack 插件。以下是其基本的目录结构： ...
terser-webpack-plugin删除代码注释、打印敏感信息等
xiao1215fei的专栏
05-17 3535
1.安装插件（此插件可移除js和vue文件中的注释、打印等信息） npm installterser-webpack-plugin -D; 2.在vue.config.js中进行配置 const TerserPlugin = require("terser-webpack-plugin"); configureWebpack: { optimization: { minimize: true, minimizer: [ new TerserPlug.
前端笔记 ---- TerserWebpackPlugin 配置
止于至善
05-18 6377
指向剥离文件的标语文本将被添加到原始文件的顶部。 可以为 false （无标题）， String 或一个函数：Function String> ，该函数将被使用存储剥离的注释的文件名来调用。 标语内容将被合并到注释中。
vue-cli中terser-webpack-plugin应用实战
Run_youngman的博客
02-23 8423
说在前面 先来说一下这个插件的作用，引用官网的一句话，该插件使用 [terser](https://github.com/terser/terser) 来压缩 JavaScript。 我们项目主要用来去除生产环境中的console以及debugger等信息。 餐前小菜 值得注意的是，vue-cli在开发环境中TerserWebpackPlugin是不会生效的，所以在引入该插件时，即使我们希望只在生产环境中生效，不需要判断当前的环境。 应用初尝试 vue-cli对于TerserWebpackPlugin是有
terser-webpack-plugin的使用:删除注释和console
qq_37899792的博客
08-11 4924
场景：扫描漏洞的时候，nodel_modules中有的插件的版本注释会视为漏洞，需要删除这些注释注意：webpack4中用到terser-webpack-plugin压缩插件，不能使用最新的版本，而是terser-webpack-plugin@4.x版本；webpack5对应的使用terser-webpack-plugin@5.x版本，否则会报错误：Error: TypeError: Cannot read property ‘javascript‘ of undefined。...
webpack构建优化：速度提升策略详解
"这篇文章是关于webpack构建优化策略的总结，主要...通过以上策略，开发者可以有效地优化webpack的构建流程，提升开发和部署效率，降低项目复杂性。在实际应用中，还应结合项目具体需求，灵活调整和应用这些优化方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值