Tree Shaking和sideEffects配置

简介: 通过修改 sideEffects 配置选项,来设置CSS文件打包的时候取消 Tree Shaking 的影响

需要将 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。

相关文章
|
移动开发 小程序
知识付费小程序注册时类目该如何选择?
知识付费小程序注册时类目该如何选择?
839 0
|
安全 Linux 网络安全
Centos 6.8下修改SSH服务默认端口,看这一篇就够了
Centos 6.8下修改SSH服务默认端口,看这一篇就够了
413 0
|
移动开发 应用服务中间件 Android开发
踩坑记录:请求接口status返回0
踩坑记录:请求接口status返回0
踩坑记录:请求接口status返回0
|
前端开发 JavaScript 开发工具
实现一个 Code Pen:(三)10 行代码实现代码格式化
在上文中,我们使用 monaco-editor 结合 Next.js,打造了编辑器的功能,在本文中,我们将继续优化 monaco-editor, 使它拥有代码格式化的功能。
1138 0
实现一个 Code Pen:(三)10 行代码实现代码格式化
|
SQL Oracle 关系型数据库
ORACLE错误码及解决方法
ORACLE错误码及解决方法
834 0
|
缓存 前端开发 JavaScript
前端工程化面试题
前端工程化面试题
202 0
|
JavaScript
从0搭建Vue3组件库(九):VitePress 搭建部署组件库文档
从0搭建Vue3组件库(九):VitePress 搭建部署组件库文档
780 0
|
运维 网络协议 安全
Windows用户如何安装Cpolar
本教程适合于Windows用户,安装并使用cpolar工具。
584 0
|
机器学习/深度学习 Python
恒源云-Pycharm远程训练避坑指南
恒源云-Pycharm远程训练避坑指南
749 0