webpack4压缩js_webpack不打包某个模块

webpack

Terser

Terser是一个javascript的解释(Parser),Mangler(绞肉机) /Compressor(压缩机)的工具集
早期我们会使用uglify-js来压缩，丑化我们的javascript代码 但是目前已经不在维护 并且不支持ES6+语法
Terser是从uglify-es fork 过来的
也就是说 Terser可以帮助我们压缩 丑化我们的代码 让我们的bundle变得更小
因为Terser是一个独立的工具 所以它可以单独安装
npm install terser
terser js/file1.js -o foo.min.js -c -m

Compress option
arrows: class或者object中的函数 转换成箭头函数
arguments: 将函数中使用arguments[index]转换成对应的参数名称
dead_code: 移除不可达的代码（tree shaking）

Managle option
toplevel: 默认值是false 顶层作用域中的变量名称 进行丑化(转换)
keep_classnames: 默认值是false 是否保持依赖的类名称
keep_fnames: 默认值是false 是否保持原来的函数名称

Terser在webpack中配置

webpack中有一个minimizer属性 在production模式下 默认就是使用TerserPlugin来处理我们的代码的
如果我们对默认的配置不满意 也可以自己来创建TerserPlugin的实例 覆盖相关的配置

首先我们需要打开minimize 让其对我们的代码进行压缩（默认production模式下已经打开了）
其次 我们可以在minimizer创建一个TerserPlugin

extractComments: 默认值位true 表示会将注释抽取到一个单独的文件中
在开发中 我们不希望保留这个注释时 可以设置为false

parallel: 使用多进程开发运行提高构建的速度 默认值是true

terserOptions: 设置我们的terser相关的配置
compress: 设置压缩相关的选项
mangle: 设置丑化相关的选项 可以直接设置为true
toplevel: 顶层变量是否进行转换
keep_classnames: 保留类的名称
keep_fnames: 保留函数的名称

const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")

module.exports = { 
   
	optimization: { 
   
		minimize: true,
		minimizer:[
			//js代码简化 terserPlugin
			new TerserPlugin({ 
   
				extractComments: false,
				terserOptions: { 
   
					compress:{ 
   
						arguments: true
					},
					mangle: true,
					toplevel: true
				}
			})
			//css代码简化 cssMinimizerPlugin
			new CssMinimizerPlugin({ 
   
				parallel： true
			})
		]
	},

}

Tree Shaking

事实上webpack实现Tree Shaking采用了两种不同的方案
usedExports: 通过标记某些函数是否被使用 之后通过Terser来进行优化的
sideEffects: 跳过整个模块/文件 直接查看该文件是否有副作用

usedExports

将mode设置为development模式
为了可以看到usedExports带来的效果 我们需要设置为development模式
因为在production模式下 webpack默认的一些优化会带来很大影响

设置usedExports为true和false对比打包后的代码
在usedExports设置为true时 会有一段魔法注释
告知Terser在优化时 可以删除掉这段代码
这个时候 我们将minimize设置为true
usedExports设置为false时 mul函数（没有使用的函数）没有被移除掉
usedExports设置为true时 mul函数被移除掉

sideEffects

sideEffects用于告知webpack complier哪些模块有副作用
副作用的意思是这里面额代码有执行一些特殊的任务 不能仅仅通过export来判断这段代码的意义
写在package.json中
表示index.js中有副作用

	"sideEffects":[
		"./src/index.js"
	],

在package.json中设置sideEffects的值
如果我们将sideEffects设置为false 就是告知webpack可以安全的删除未用到的exports
如果有一些我们希望保留 可以设置为数组

所以在项目中对javascript的代码进行TreeShaking最好
在optimization中配置usedExports为true 来帮助Terser进行优化
在package.json中配置sideEffects 直接对模块进行优化

CSS实现Tree Shaking

Css的Tree Shaking需要借助于一些其他的插件
在早期的时候 使用PurifyCss插件来完成CSS的tree shaking 但是目前不维护了
目前使用PurgeCss来完成CSS的Tree Shaking 也是一个帮助我们删除未使用的css的工具

npm install purgecss-webpack-plugin

const { 
    PurgeCssPlugin } = require("purgecss-webpack-plugin");
const glob = require("glob");
const path = require("path");

module.exports = { 
   
	plugins: [
		new PurgeCssPlugin({ 
   
			paths: glob.sync(`${ 
     path.resolve(__dirname, "../src")}/**/*`, { 
    nodir: true })
		}),
	],
}

Scope Hoisting

Scope Hoising从webpack3开始增加的一个新功能
功能是对作用域进行提升 并且让webpack打包后的代码更小 运行更快

默认情况下webpack打包会有很多的函数作用域 包括一些（比如最外层的）IIFE
无论是从最开始的代码运行 还是加载一个模块 都需要执行一系列的函数
Scop Hoisting可以将函数合并到一个模块中来运行

使用Scope Hoistiong非常简单 webpack已经内置了对应模块
在production模式下 默认这个模块就会启用
在development模式下 我们需要自己打开该模块

const  webpack = require("webpack");

module.exports = { 
   
	plugins: [
		new webpack.optimize.ModuleConcatenationPlugin()
	],
]

http压缩

http压缩是一种内置在服务器和客户端之间的 以改进传输速度和带宽利用率的方式
http压缩的流程
1.http数据在服务器发送前就已经被压缩了 （可以在webpack完成）
2.兼容的浏览器在向服务器发送请求时 会告知服务器自己支持哪些压缩格式
3.服务器在浏览器支持的压缩格式下 直接饭hi对应的压缩后的文件 并且在响应头中告知浏览器

webpack对文件压缩

webpack中相当于是实现了http压缩的第一步操作 我们可以使用CompressionPlugin
第一步 安装CompressionPlugin
npm install compression-webpack-plugin
第二部 使用CompressionPlugin

new CompressionPlugin({ 
   
	test: /\.(css|js)$/,//匹配哪些文件需要压缩
	//threshold: 500, //设置文件从多大开始压缩
	minRatio: 0.7,//至少的压缩比例
	algorithm: "gzip",//采用的压缩算法
	//include:
	//exclude
})

html文件中代码压缩

		new HtmlWebpackPlugin({ 
   
			template: "./index.html",
			minify: isProduction
				? { 
   
						//移除注释
						removeComments: true,
						//移除空属性
						removeEmptyAttributes: true,
						//移除默认属性
						removeRedundantAttributes: true,
						//折叠空白字符
						collapseWhitespace: true,
						//压缩内联的css
						minifyCSS: true,
						//压缩javascript
						minifyJS: { 
   
							mangle: { 
   
								toplevel: true,
							},
						},
				  }
				: false,
		}),

今天的文章webpack4压缩js_webpack不打包某个模块分享到此就结束了，感谢您的阅读。