webpack源码解析七（optimization）

最新推荐文章于 2024-07-28 00:56:04 发布
最新推荐文章于 2024-07-28 00:56:04 发布
阅读量3.9k 收藏 4
点赞数
分类专栏： 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vv_bug/article/details/107549955
版权
本文详细解析了webpack的Optimization配置，包括minimize、minimizer、splitChunks等选项，通过实例展示了如何配置和使用这些选项，以及它们在实际项目中的应用。通过对webpack配置的深入理解，帮助开发者更好地优化项目构建过程。
摘要由CSDN通过智能技术生成

前言

前面我们写了几篇文章用来介绍webpack源码，跟着官网结合demo把整个webpack配置撸了一遍：

今天我们结合demo来看一下webpack的Optimization配置。

demo还是前面几节中的: https://github.com/913453448/webpack-demo.git

optimization

webpack4.0版本后会根据当前配置的mode对优化操作，你也可以单独配置或者是覆盖默认的配置。

什么意思呢？比如在webpack4之前如果我们需要对打包好的资源进行压缩，可能我们需要单独用到uglifyjs-webpack-plugin插件，如果我们需要按规则拆分包可能需要用到CommonsChunkPlugin等等，由于这些操作在项目中很频繁也很实用，所以webpack干脆就内置到源码变成一个“Optimization”配置选项。

minimize

boolean

是否利用默认的TerserPlugin插件或者自定义的插件去压缩打包过后的资源文件。

生产环境默认是true

可以看一下webpack源码，

webpack/lib/WebpackOptionsDefaulter.js:

...
const isProductionLikeMode = options => {
   
	return options.mode === "production" || !options.mode;
};
...
this.set("optimization.minimize", "make", options =>
			isProductionLikeMode(options)
		);
...

可以看到，mode为“production”的时候默认是开启的，我们可以这样设置：

webpack.config.js

module.exports = {
   
  //...
  optimization: {
   
    minimize: options.mode === "production"
  }
};

minimizer

[TerserPlugin] and or [function (compiler)]

压缩代码使用的插件，默认是TerserPlugin ，你也可以使用该选项覆盖默认的插件。

webpack.config.js

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

module.exports = {
   
  optimization: {
   
    minimizer: [
      new TerserPlugin({
   
        cache: true,
        parallel: true,
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
   
          // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
        }
      }),
    ],
  }
};

或者使用方法：

module.exports = {
   
  optimization: {
   
    minimizer: [
      (compiler) => {
   
        const TerserPlugin = require('terser-webpack-plugin');
        new TerserPlugin({
    /* your config */ }).apply(compiler);
      }
    ],
  }
};

源码位置：

lib/WebpackOptionsDefaulter.js(默认插件)

...
this.set("optimization.minimizer", "make", options => [
			{
   
				apply: compiler => {
   
					// Lazy load the Terser plugin
					const TerserPlugin = require("terser-webpack-plugin");
					new TerserPlugin().apply(compiler);
				}
			}
		]);
...

lib/WebpackOptionsApply.js：

...
		if (options.optimization.minimize) {
   
			for (const minimizer of options.optimization.minimizer) {
   
				if (typeof minimizer === "function") {
   
					minimizer.call(compiler, compiler);
				} else {
   
					minimizer.apply(compiler);
				}
			}
		}
...

ok！我们结合demo用一下这个选项，首先，我们把minimize选项设置成false,

webpack-chain.js:

const Config = require('webpack-chain');
const config = new Config();
const path = require("path");

config
    .mode("production")
    .context(path.resolve(__dirname, "./src"))
    .entry("app")
        .add("./index.js")
        .end()
    .output
        .path(path.join(process.cwd(), "lib"))
        .pathinfo(false)
        .filename("[name].[contenthash:16].[fullhash:16].[id].js")
        .chunkFilename("[id].js")
        .end()
    .set("experiments",{
   })
    .module
        // .noParse(/babel-polyfill/)
        .rule("vue")
            .test(/\.vue$/)
            .use("vue-loader")
                .loader("vue-loader")
                .end()
            .end()
        .rule("sass")
            .test( /\.(sass|scss)$/)
            .use("style-loader")
                .loader("style-loader")
                .end()
            .use("css-loader")
                .loader("css-loader")
                .end()
            .use("postcss-loader")
                .loader("postcss-loader")
                .options( {
   
                    config: {
   
                        path: path.resolve(__dirname, "./postcss.config.js")
                    }
                })
                .end()
            .use("sass-loader")
                .loader("sass-loader")
                .end()
            .end()
        .rule("png")
            .test(/\.png$/)
            .oneOf("png-loader")
                .rule("url-loader")
                    .resourceQuery(/inline/)
                    .use("url-loader")
                        .loader("url-loader")
                        .options({
   
                            limit: 1024 * 1024 * 10
                        })
                        .end()
                    .end()
                .rule("file-loader")
                    .resourceQuery(/external/)
                    .use("file-loader")
                        .loader("file-loader")
                        .end()
                    .end()
                .end()
            .end()
        .end()
    .resolve
        .alias
            .set("DemoVue", path.resolve(__dirname, "./src/demo-vue.vue"))
            .end()
        .extensions
            .add(".wasm").add(".mjs").add(".js").add(".json").add(".vue")
            .end()
        .modules
            .add(path.resolve(__dirname, "src")).add("node_modules")
            .end()
        .unsafeCache(/demo-publicpath/)
        .end()
    .plugin("vue-loader-plugin")
        .use(require("vue-loader-plugin"),[])
        .end()
    .devServer
        .before((app, server, compiler)=>{
   
            app.get("/login",(req,res,next)=>{
   
                req.query.name="hello "+req.query.name;
                next();
            });
        })
        .after((app, server, compiler)=>{
   
            app.get("/login",(req,res,next)=>{
   
                res.json({
   msg: req.query.name});
            });
        })
        .clientLogLevel("info")
        .allowedHosts
            .add("localhost")
            .end()
        .contentBase(path.join(process.cwd(), "lib"))
        .filename(/app\.js/)
        .headers({
   
            'X-Custom-Foo': 'bar'
        })
        .historyApiFallback(true)
        .host("0.0.0.0")
        .port("8090")
        .hot(true)
        .set("liveReload", true)
        .open(true)
        .useLocalIp(true)
        .overlay(true)
        .end()
    .performance
        .hints("warning")
        .end();

config
    .optimization
        .minimize(false);
module.exports = config.toConfig();

然后我们执行webpack：

➜  webpack-demo git:(master) ✗ npx webpack
Hash: bf5359b2e366b637ed00
Version: webpack 5.0.0-beta.7
Time: 1539ms
Built at: 2020-07-21 15:28:52
                                       Asset      Size
                                      425.js  17.2 KiB  [emitted]
        63fe41824cb8236c0896a71b7df7f461.png  59.3 KiB  [emitted]
app.0ebefcd962170615.bf5359b2e366b637.143.js   210 KiB  [emitted] [immutable]  [name: app]
Entrypoint app = app.0ebefcd962170615.bf5359b2e366b637.143.js
./index.js + 2 modules 222 KiB [built]
./demo-vue.vue + 5 modules 5.05 KiB [built]
./demo-vue.vue?vue&type=style&index=0&id=47a7e22a&lang=scss&scoped=true& 824 bytes [built]
../node_modules/style-loader/dist/cjs.js!../node_modules/css-loader/dist/cjs.js!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src??ruleSet[0].rules[0].use[2]!../node_modules/sass-loader/dist/cjs.js!../node_modules/vue-loader/lib??vue-loader-options!./demo-vue.vue?vue&type=style&index=0&id=47a7e22a&lang=scss&scoped=true& 810 bytes [built]
../pub1.png?external 80 bytes [built]
../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.64 KiB [built]
../node_modules/css-loader/dist/cjs.js!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src??ruleSet[0].rules[0].use[2]!../node_modules/sass-loader/dist/cjs.js!../node_modules/vue-loader/lib??vue-loader-options!./demo-vue.vue?vue&type=style&index=0&id=47a7e22a&lang=scss&scoped=true& 550 bytes [built]
../node_modules/css-loader/dist/runtime/api.js 2.46 KiB [built]
    + 8 hidden modules
➜  webpack-demo git:(master) ✗

可以看到，在我们lib目录下面生成了三个文件：

63fe41824cb8236c0896a71b7df7f461.png
425.js
app.0ebefcd962170615.bf5359b2e366b637.143.js

我们随便看一个js文件：

lib/app.0ebefcd962170615.bf5359b2e366b637.143.js

/******/ (() => {
    // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({
   });
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {
   };
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
   
/******/ 		// Check if module is in cache
/******/ 		if(__webpack_module_cache__[moduleId]) {
   
/******/ 			return __webpack_module_cache__[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
   
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {
   }
/******/ 		};
...

ok! 可以看到，代码并没有被压缩，中间还有些注释，这样的代码我们肯定是不能发布的，所以我们用一下webpack默认的压缩，我们直接把minimize选择设置成true(默认设置)：

webpack-chain.js

...
config
    .optimization
        .minimize(true);
module.exports = config.toConfig();

然后我们执行webpack编译看结果：

./lib
├── 425.js
├── 63fe41824cb8236c0896a71b7df7f461.png
├── app.454b4ea21a1d7574.a4f7bd5606571443.143.js
└── app.454b4ea21a1d7574.a4f7bd5606571443.143.js.LICENSE

可以看到，lib下面出现了四个文件，

app.454b4ea21a1d7574.a4f7bd5606571443.143.js：

/*! For license information please see app.454b4ea21a1d7574.a4f7bd5606571443.143.js.LICENSE */
(()=>{
   "use strict";var t={
   },e={
   };function n(r){
   if(e[r])return e[r].exp...

可以看到，注释webpack默认都帮我们移到了一个叫“app.454b4ea21a1d7574.a4f7bd5606571443.143.js.LICENSE”文件中，

app.454b4ea21a1d7574.a4f7bd5606571443.143.js.LICENSE：

/*!
 * Vue.js v2.6.11
 * (c) 2014-2019 Evan You
 * Released under the MIT License.
 */

ok! 这就是vue的源码中的注释，webpack直接帮我们拎出来了，那如果我们不需要这些注释我们该怎么做呢？

我们需要重新修改TerserPlugin 配置信息，

webpack-chain.js:

...
config
    .optimization
        .minimize(true)
        .minimizer("terser")
            .use(require("terser-webpack-plugin"),[{
   
                extractComments: false
            }])
module.exports = config.toConfig();

👌， 我们运行webpack：

./lib
├── 425.js
├── 63fe41824cb8236c0896a71b7df7f461.png
└── app.732205f4c110a904.a8ba809e02a92a83.143.js

0 directories, 3 files

可以看到，生产了三个文件，另外一个LICENSE文件不见了，我们打开“app.732205f4c110a904.a8ba809e02a92a83.143.js”看看，

app.732205f4c110a904.a8ba809e02a92a83.143.js：

(()=>{
   "use strict";var t,e={
   },n={
   };function r(t){
   if(n[t])return n[t].exports;var o=n[t...
/*!
 * Vue.js v2.6.11
 * (c) 2014-2019 Evan You
 * Released under the MIT License.
 */
 var o=Object.freeze({
   });function i(t){
   return null==t}function a(t){
   return null!=t}function s(t){
   return
最低0.47元/天 解锁文章
vv_小虫
关注
专栏目录
webpack配置详解【六】 -- optimization详解
daodaoke的博客
07-28 1440
minimizer内配置的压缩 需要安装terser-webpack-plugin npm i -D terser-webpack-plugin 1、文中注释内容是默认，可不写，除非需要修改里面的配置。 2、runtimeChunk可解决修改a文件导致b文件的contenthash变化的问题。 其他更多参数详解见代码注释。 const { resolve } = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'
webpack中的optimization配置详解（持续更新）
热门推荐
编码世界
01-12 7万+
webpack中的optimization主要用来自定义一些优化打包策略。，主要四个配置1.minimizer、2.runtimeChunk、3.noEmitOnErrors、4.splitChunks
Webpack--入门只看这一篇就够了(图文＋代码）
最新发布
weixin_46714216的博客
07-28 4449
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。
webpack配置optimization详解
~
04-11 2229
optimization: { splitChunks: { chunks: 'all', minSize: 30 * 1024, // 大于30kb的才会被分割 maxSize: 0, // 最大没有限制 minChunks: 1, // 要提取的chunk最少被引用1次 maxAsyncRequests: 5, // 按需加载时并行加载的文件的最大数量 maxInitialRequests: 3, .
webpack性能优化---------------详解
m0_57103064的博客
07-16 911
第三种分包的模式是splitChunk，它底层是使用SplitChunksPlugin来实现的：因为该插件webpack已经默认安装和集成，所以我们并不需要单独安装和直接使用该插件；只需要提供SplitChunksPlugin相关的配置信息即可；1.Webpack提供了SplitChunksPlugin默认的配置，我们也可以手动来修改它的配置：比如默认配置中，chunks仅仅针对于异步（async）请求，我们可以设置为initial或者all；2.SplitChunks自定义配置解析。
Webpack5 教程（8）----- 优化代码运行性能
每天都要努力学习哦~~
01-26 1497
但是这样的话就会有一个问题, 因为前后输出的文件名是一样的，都叫 main.js，一旦将来发布新版本，因为文件名没有变化导致浏览器会直接读取缓存，不会加载新资源，项目也就没法更新了。当我们修改 math.js 文件再重新打包的时候，因为 contenthash 原因，math.js 文件 hash 值发生了变化（这是正常的）。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。runtime 文件只保存文件的 hash 值和它们与文件关系，整个文件体积就比较小，所以变化重新请求的代价也小。
webpack源码解析三
vv_bug
07-09 2546
前言 前面写了一篇文章webpack源码解析一梳理了一遍webpack的编译过程，今天我们结合demo来过一遍webpack的所有配置项。 开始 为了更好的了解每一个选项的用法我们首先clone一份webpack的源码（demo用的是5.0.0-beta.7版本）： git clone https://github.com/webpack/webpack.git 源码clone完毕后在当前页面执行setup操作并且安装webpack-cli： yarn setup && yarn add
webpack源码解析五
vv_bug
07-12 1752
前言 我们继续前面的内容，把webpack剩下的配置项撸一遍，推荐大家先看一下前面的文章： webpack源码解析一 webpack源码解析二（html-webpack-plugin插件） webpack源码解析三 webpack源码解析四 配置 devtool 此选项控制是否生成，以及如何生成 source map。 什么是Source map？ 简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置（source map更多的介绍跟
webpack教程示例源码
04-20
除了基本的生产环境配置，Webpack 还提供多种优化手段，如`optimization.splitChunks`用于提取公共模块，`optimization.runtimeChunk`管理运行时代码，`optimization.minimizer`指定压缩插件（如...
webpack 最佳配置指北(推荐)
11-27
核心配置主要包括：entry（入口）、output（输出）、mode（模式）、resolve（解析）、module（模块）、optimization（优化）、plugin（插件）、source map（源码映射）和performance（性能提示）。以下是对这些关键...
webpack5 基础配置（性能优化）12 DLL Terser Scope Hoisting
lin_fightin的博客
04-10 1577
认识DLL库（了解） DLL全称是 动态链接库，是为软件在winodw种实现共享函数库的一种实现方式，而Webpack也内置了DLL的功能，为的就是可以共享，不经常改变的代码，抽成一个共享的库。这个库在之后的编译过程中，会被引入到其他项目的代码中。 比如，我们可以对react/react-dom进行单独编译成一个dll库，然后在接下来的要使用react的项目中直接引入这个库，因为react/react-dom已经编译过了的，所以不用再对react进行编译。vue等等也可以。 DLL使用分成两部 1 单独打包
webpack4配置之——13：生产环境代码压缩
kevin的博客
03-21 3170
如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里 生产环境代码压缩 虽说生产环境只要配置了 mode:"production" 就能实现 js 的代码压缩，但我们不仅要压缩 js 代码，还需要压缩 css html 文件 可以先打开 bin/css/app.css 文件，会发现，css 文件格式是未压缩的 之前的章节中已经抽取了 css 文件，用到了 mini-css-extrac...
vue项目打包上线
DDAD9527的博客
10-29 3206
vue项目打包之后会得到dist目录 该目录下有三个文件,是上传到服务器所需的 如果希望可以双击打开index.html，则需要提前在vue.config.js中配置 { publicPath: './' } 打包优化-路由懒加载 { path: '/login', component: () => import('@/views/login/index'), hidden: true }, 一个路由对一个组件，表示一个页面。懒加载...
vueCli4配置config.optimization.minimizer(‘terser‘)，去掉console.log、debugger、注释
qq_15006083的博客
09-03 1万+
vueCli4配置config.optimization.minimizer(‘terser’)，生产环境去掉console.log debugger ```javascript const devFlag = process.env.NODE_ENV === 'development' chainWebpack: config => { config.when(!devFlag, config => { config.optimization.mini
webpack与vue-cli合并配置，打包生产环境代码时如何删除所有的console.log、代码注释和debugger
weixin_45340607的博客
03-14 4005
发现我们在configurewebpack中配置的optimization并没有和webpack默认配置文件中的optimization合并，而是合并到了options中。最近公司项目开发上线后，发现控制台有很多当时测试时打印的信息。但是如果手动删除的话工作量太大，而且不利于以后的维护和debugger。第一步上网找到webpack关于优化console.log语句的插件---------此时我们TerserPlugin插件的默认配置就已经和我们自定义修改的配置进行合并了。接下来就是下载配置，
JS使用RSA非对称加密方式加密传输数据
asp.net爱好
07-30 5291
js rsa 加密传输数据
vue.config.js配置打包删除console和debugger
weixin_44875693的博客
05-11 2847
项目版本： @vue/cli 4.5.15 webpack: 4.46.0 webpack-cli: 4.9.2 webpack-dev-server 3.11.3 vue.config.js配置 chainWebpack: (config) => { // 去掉debugger console config.when(process.env.NODE_ENV !== "development", config => { config.op
webpack(高级)--文件的压缩Terser(js/css/html) Tree Shaking
聪明勇敢有力气的博客
02-15 3034
webpack(高级)--文件的压缩Terser(js/css/html) Tree Shaking
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值