将文件标记为 side-effect-free(无副作用)
前端精髓
共 1308字,需浏览 3分钟
·
2021-05-31 12:51
需要将 mode 配置设置成 development,以确定 bundle 不会被压缩:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'development',
optimization: {
usedExports: true,
},
};
src/title.js
document.title = "改标题";
export function getTitle() {
console.log("getTitle");
}
src/index.js
import './title.js'
console.log('hello world')
bundle.js
(()=>{"use strict";document.title="改标题",console.log("hello world")})();
发现保留了代码 document.title="改标题"
,如果想这行代码也被 Tree Shaking 删除掉,可以在 package.json 文件中加上 "sideEffects": false,
这个配置,然后重新打包就没有这行代码了。
(()=>{"use strict";console.log("hello world")})();
注意,将文件标记为 side-effect-free(无副作用) ,所有导入文件都会受到 tree shaking 的影响。如果在项目中使用类似 css-loader 并 import 一个 CSS 文件,将会在生产模式中删除。
src/index.css
html,body {
background: red;
}
src/index.js
import './index.css'
console.log('hello world')
bundle.js
(()=>{"use strict";console.log("hello world")})();
发现打包的时候 index.css 的样式并没有打包进来。现在可以通过修改 sideEffects 配置选项,来设置CSS文件打包的时候取消 Tree Shaking 的影响。
sideEffects:["*.css"]
此数组支持简单的 glob 模式匹配相关文件。其内部使用了 glob-to-regexp(支持:*
,**
,{a,b}
,[a-z]
)。如果匹配模式为 *.css
,且不包含 /,将被视为 **/*.css。
评论
PNGDriver将文件压缩成png
PNGDriver可以把一个文件(如js文件)压缩成png文件,支持多种png格式,并提供基于web的解压方案.示例代码:varimg=newImage();img.src="image.png";i
PNGDriver将文件压缩成png
0
JMK将文件保持在一致状态
JMK一种用于将文件保持在一致状态的实用程序。该应用程序是基于make实用程序的,该实用程序是大多数Unix系统的一部分,但旨在支持编写与平台无关的makefile的任务。文件名和路径列表以规范形式编
JMK将文件保持在一致状态
0
Pdfsandwich将 PDF 文件转换成文本
Pdfsandwich是将文本添加到图像形式的文本PDF文件(如扫描书籍)的工具。它使用光学字符识别(OCR)创建一个额外的图层,包含了原始页面已识别的文本。这对于复制和处理文本很有用。Pdfsand
Pdfsandwich将 PDF 文件转换成文本
0
DiscordChatExporter将 Discord 聊天记录导出到文件
DiscordChatExporter可用于将Discord频道的消息历史导出到一个文件中。它适用于直接信息、群组信息和服务器频道,并支持Discord的Markdown方言以及所有其他富媒体功能。此
DiscordChatExporter将 Discord 聊天记录导出到文件
0