As you refactor and modify applications, it's difficult to manage and keep track of files as they become unused. Keeping this "dead" code around adds noise to your application and reduces clarity. Just as ESLint can tell us when variables become unused, Webpack (with the help of the unused-files-webpack-plugin) can tell us when entire files become unused. First, we'll install the plugin with npm and save it as a devDependency. Next, we'll use npm run scripts to build a new command that will run Webpack with the plugin. Finally, we'll learn how to use Webpack environment variables to conditionally add plugins to your Webpack config. By the end of the lesson, you'll have a useful cli command you can run to check for unused modules in your Webpack build

Install:

npm i -D unused-files-webpack-plugin

Update scripts:

"check-unused": "webpack --mode production --env.unused=true --display=errors-only",

Update webpack.config.js:

/* eslint-env node */
const UnusedFilesPlugin = require('unused-files-webpack-plugin').default; module.exports = (env) => {
const config = {
entry: './src/index.js'
}; if (env && env.unused) {
config.plugins = [
new UnusedFilesPlugin({
failOnUnused: true,
patterns: ['src/*.js']
})
]
} return config;
};

[Webpack] Detect Unused Code with Webpack and unused-files-webpack-plugin的更多相关文章

  1. [Webpack 2] Add Code Coverage to tests in a Webpack project

    How much of your code runs during unit testing is an extremely valuable metric to track. Utilizing c ...

  2. webpack打包 The 'mode' option has not been set, webpack will fallback to

    webpack 打包报错 The 'mode' option has not been set, webpack will fallback to 'production' for,Module no ...

  3. Webpack实战(五):轻松读懂Webpack如何分离样式文件

    在上一篇文章中我给大家分享了预处理器(loader),里面讲到了style-loader 和css-loader,有关样式引入的问题,但是上面的样式文件只是引入到style标签里面,并不是我想要的样式 ...

  4. 在webpack中使用Code Splitting--代码分割来实现vue中的懒加载

    当Vue应用程序越来越大,使用Webpack的代码分割来懒加载组件,路由或者Vuex模块, 只有在需要时候才加载代码. 我们可以在Vue应用程序中在三个不同层级应用懒加载和代码分割: 组件,也称为异步 ...

  5. webpack优化之code splitting

    作为当前风头正盛的打包工具,webpack风靡前端界.确实作为引领了一个时代的打包工具,很多方面都带来了颠覆性的改进,让我们更加的感受到自动化的快感.不过最为大家诟病的一点就是用起来太难了. 要想愉快 ...

  6. [Tools] Support VS Code Navigation and Autocomplete Based on Webpack Aliases with jsconfig.json

    It's common to setup Webpack aliases to make imports much more convenient, but then you lose the abi ...

  7. webpack学习之—— Code Spliting(代码分离)

    代码分离特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件.代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间. 有三种常 ...

  8. [Webpack] Externalize Dependencies to be Loaded via CDN with webpack

    We can separate our custom application code from the common libraries we leverage, such as React and ...

  9. webpack学习(二):先写几个webpack基础demo

    一.先写一个简单demo1 1-1安装好webpack后创建这样一个目录: 1-2:向src各文件和dist/index.html文件写入内容: <!DOCTYPE html> <h ...

随机推荐

  1. hdu多校5

    1002 思路:贪心显然不好贪,直接爆搜. #include<bits/stdc++.h> #define LL long long #define fi first #define se ...

  2. thinkphp Upload上传文件在客户端生成的临时文件$_FILES['file']['tmp_name']

    1.关于thinkphp 的Upload的$_FILES['file']['tmp_name'] 在使用thinkphp上传图片的时候,在上传的$_FILES数组中,有一个$_FILES['file' ...

  3. Redux 中间件的执行顺序理解

    Redux.applyMiddleware(thunk, middleware1) 和 Redux.applyMiddleware(middleware1, thunk) 的区别: <!DOCT ...

  4. Struts2与Servlet之间的关系

    在struts2.0中,可以通过ServletActionContext.getRequest()获取request对象. 在action的方法中return一个字符串,该字符串对应struts.xm ...

  5. 【BZOJ 3881】【COCI 2015】Divljak

    http://www.lydsy.com/JudgeOnline/problem.php?id=3881 好难的一道题啊qwq 一开始我想对T建AC自动机,根本不可做. 正解是对S建AC自动机. fa ...

  6. cogs 1075. [省常中2011S4] 最短路径问题

    1075. [省常中2011S4] 最短路径问题 ★   输入文件:short.in   输出文件:short.out   简单对比 时间限制:1 s   内存限制:128 MB [问题描述] 平面上 ...

  7. 【数论】【莫比乌斯反演】【线性筛】hdu6134 Battlestation Operational

    看这个题解吧:http://blog.csdn.net/wubaizhe/article/details/77338332 代码里顺便把几个常用的线性筛附上了. Key:1.gcd(i,j)==1利用 ...

  8. 【推导】【DFS】Codeforces Round #429 (Div. 1) B. Leha and another game about graph

    题意:给你一张图,给你每个点的权值,要么是-1,要么是1,要么是0.如果是-1就不用管,否则就要删除图中的某些边,使得该点的度数 mod 2等于该点的权值.让你输出一个留边的方案. 首先如果图内有-1 ...

  9. 【矩阵乘法】Gym - 101412C - One-Dimensional Cellular Automaton

    给你一个一维细胞自动机,第i个格子在时刻t的状态是这样获得的,问你t时刻的状态. 把0时刻的状态视作一个列向量,发现状态转移其实是一个n*n的矩阵(以n=5为例), B C       A B C   ...

  10. python基础之数据类型之元组和字典

    四.元组 1.用途:元组是不可变的列表,能存多个值,但只能取,不能改 2.定义:name = (‘alex’, ’egon’, ‘wxx’) 在()内用,分割开,可存放任意类型的值 强调:x = (‘ ...