Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

3 лет назад
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548
  1. <div align="center">
  2. <a href="https://github.com/webpack/webpack">
  3. <img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
  4. </a>
  5. </div>
  6. [![npm][npm]][npm-url]
  7. [![node][node]][node-url]
  8. [![deps][deps]][deps-url]
  9. [![tests][tests]][tests-url]
  10. [![cover][cover]][cover-url]
  11. [![chat][chat]][chat-url]
  12. [![size][size]][size-url]
  13. # terser-webpack-plugin
  14. This plugin uses [terser](https://github.com/fabiosantoscode/terser) to minify your JavaScript.
  15. ## Requirements
  16. This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.
  17. ## Getting Started
  18. To begin, you'll need to install `terser-webpack-plugin`:
  19. ```console
  20. $ npm install terser-webpack-plugin --save-dev
  21. ```
  22. Then add the plugin to your `webpack` config. For example:
  23. **webpack.config.js**
  24. ```js
  25. const TerserPlugin = require('terser-webpack-plugin');
  26. module.exports = {
  27. //...
  28. optimization: {
  29. minimizer: [new TerserPlugin()]
  30. }
  31. };
  32. ```
  33. And run `webpack` via your preferred method.
  34. ## Options
  35. ### `test`
  36. Type: `String|RegExp|Array<String|RegExp>`
  37. Default: `/\.js(\?.*)?$/i`
  38. Test to match files against.
  39. ```js
  40. // in your webpack.config.js
  41. new TerserPlugin({
  42. test: /\.js(\?.*)?$/i
  43. })
  44. ```
  45. ### `include`
  46. Type: `String|RegExp|Array<String|RegExp>`
  47. Default: `undefined`
  48. Files to include.
  49. ```js
  50. // in your webpack.config.js
  51. new TerserPlugin({
  52. include: /\/includes/
  53. })
  54. ```
  55. ### `exclude`
  56. Type: `String|RegExp|Array<String|RegExp>`
  57. Default: `undefined`
  58. Files to exclude.
  59. ```js
  60. // in your webpack.config.js
  61. new TerserPlugin({
  62. exclude: /\/excludes/
  63. })
  64. ```
  65. ### `cache`
  66. Type: `Boolean|String`
  67. Default: `false`
  68. Enable file caching.
  69. Default path to cache directory: `node_modules/.cache/terser-webpack-plugin`.
  70. > ℹ️ If you use your own `minify` function please read the `minify` section for cache invalidation correctly.
  71. #### `Boolean`
  72. Enable/disable file caching.
  73. ```js
  74. // in your webpack.config.js
  75. new TerserPlugin({
  76. cache: true
  77. })
  78. ```
  79. #### `String`
  80. Enable file caching and set path to cache directory.
  81. **webpack.config.js**
  82. ```js
  83. // in your webpack.config.js
  84. new TerserPlugin({
  85. cache: 'path/to/cache'
  86. })
  87. ```
  88. ### `cacheKeys`
  89. Type: `Function<(defaultCacheKeys, file) -> Object>`
  90. Default: `defaultCacheKeys => defaultCacheKeys`
  91. Allows you to override default cache keys.
  92. Default cache keys:
  93. ```js
  94. ({
  95. terser: require('terser/package.json').version, // terser version
  96. 'terser-webpack-plugin': require('../package.json').version, // plugin version
  97. 'terser-webpack-plugin-options': this.options, // plugin options
  98. path: compiler.outputPath ? `${compiler.outputPath}/${file}` : file, // asset path
  99. hash: crypto.createHash('md4').update(input).digest('hex'), // source file hash
  100. });
  101. ```
  102. ```js
  103. // in your webpack.config.js
  104. new TerserPlugin({
  105. cache: true,
  106. cacheKeys: (defaultCacheKeys, file) => {
  107. defaultCacheKeys.myCacheKey = 'myCacheKeyValue';
  108. return defaultCacheKeys;
  109. },
  110. })
  111. ```
  112. ### `parallel`
  113. Type: `Boolean|Number`
  114. Default: `false`
  115. Use multi-process parallel running to improve the build speed.
  116. Default number of concurrent runs: `os.cpus().length - 1`.
  117. > ℹ️ Parallelization can speedup your build significantly and is therefore **highly recommended**.
  118. #### `Boolean`
  119. Enable/disable multi-process parallel running.
  120. ```js
  121. // in your webpack.config.js
  122. new TerserPlugin({
  123. parallel: true
  124. })
  125. ```
  126. #### `Number`
  127. Enable multi-process parallel running and set number of concurrent runs.
  128. ```js
  129. // in your webpack.config.js
  130. new TerserPlugin({
  131. parallel: 4
  132. })
  133. ```
  134. ### `sourceMap`
  135. Type: `Boolean`
  136. Default: `false`
  137. Use source maps to map error message locations to modules (this slows down the compilation).
  138. If you use your own `minify` function please read the `minify` section for handling source maps correctly.
  139. > ⚠️ **`cheap-source-map` options don't work with this plugin**.
  140. ```js
  141. // in your webpack.config.js
  142. new TerserPlugin({
  143. sourceMap: true
  144. })
  145. ```
  146. ### `minify`
  147. Type: `Function`
  148. Default: `undefined`
  149. Allows you to override default minify function.
  150. By default plugin uses [terser](https://github.com/fabiosantoscode/terser) package.
  151. Useful for using and testing unpublished versions or forks.
  152. > ⚠️ **Always use `require` inside `minify` function when `parallel` option enabled**.
  153. ```js
  154. // in your webpack.config.js
  155. new TerserPlugin({
  156. minify(file, sourceMap) {
  157. const extractedComments = [];
  158. // Custom logic for extract comments
  159. const { error, map, code, warnings } = require('uglify-module') // Or require('./path/to/uglify-module')
  160. .minify(file, {
  161. /* Your options for minification */
  162. });
  163. return { error, map, code, warnings, extractedComments };
  164. }
  165. })
  166. ```
  167. ### `terserOptions`
  168. Type: `Object`
  169. Default: [default](https://github.com/fabiosantoscode/terser#minify-options)
  170. Terser minify options.
  171. ```js
  172. // in your webpack.config.js
  173. new TerserPlugin({
  174. terserOptions: {
  175. ecma: undefined,
  176. warnings: false,
  177. parse: {},
  178. compress: {},
  179. mangle: true, // Note `mangle.properties` is `false` by default.
  180. module: false,
  181. output: null,
  182. toplevel: false,
  183. nameCache: null,
  184. ie8: false,
  185. keep_classnames: undefined,
  186. keep_fnames: false,
  187. safari10: false
  188. }
  189. })
  190. ```
  191. ### `extractComments`
  192. Type: `Boolean|String|RegExp|Function<(node, comment) -> Boolean|Object>|Object`
  193. Default: `false`
  194. Whether comments shall be extracted to a separate file, (see [details](https://github.com/webpack/webpack/commit/71933e979e51c533b432658d5e37917f9e71595a)).
  195. By default extract only comments using `/^\**!|@preserve|@license|@cc_on/i` regexp condition and remove remaining comments.
  196. If the original file is named `foo.js`, then the comments will be stored to `foo.js.LICENSE`.
  197. The `terserOptions.output.comments` option specifies whether the comment will be preserved, i.e. it is possible to preserve some comments (e.g. annotations) while extracting others or even preserving comments that have been extracted.
  198. #### `Boolean`
  199. Enable/disable extracting comments.
  200. ```js
  201. // in your webpack.config.js
  202. new TerserPlugin({
  203. extractComments: true
  204. })
  205. ```
  206. #### `String`
  207. Extract `all` or `some` (use `/^\**!|@preserve|@license|@cc_on/i` RegExp) comments.
  208. ```js
  209. // in your webpack.config.js
  210. new TerserPlugin({
  211. extractComments: 'all'
  212. })
  213. ```
  214. #### `RegExp`
  215. All comments that match the given expression will be extracted to the separate file.
  216. ```js
  217. // in your webpack.config.js
  218. new TerserPlugin({
  219. extractComments: /@extract/i
  220. })
  221. ```
  222. #### `Function<(node, comment) -> Boolean>`
  223. All comments that match the given expression will be extracted to the separate file.
  224. ```js
  225. // in your webpack.config.js
  226. new TerserPlugin({
  227. extractComments: function (astNode, comment) {
  228. if (/@extract/i.test(comment.value)) {
  229. return true;
  230. }
  231. return false;
  232. }
  233. })
  234. ```
  235. #### `Object`
  236. Allow to customize condition for extract comments, specify extracted file name and banner.
  237. ```js
  238. // in your webpack.config.js
  239. new TerserPlugin({
  240. extractComments: {
  241. condition: /^\**!|@preserve|@license|@cc_on/i,
  242. filename(file) {
  243. return `${file}.LICENSE`;
  244. },
  245. banner(licenseFile) {
  246. return `License information can be found in ${licenseFile}`;
  247. }
  248. }
  249. })
  250. ```
  251. ##### `condition`
  252. Type: `Boolean|String|RegExp|Function<(node, comment) -> Boolean|Object>`
  253. Condition what comments you need extract.
  254. ```js
  255. // in your webpack.config.js
  256. new TerserPlugin({
  257. extractComments: {
  258. condition: 'some',
  259. filename(file) {
  260. return `${file}.LICENSE`;
  261. },
  262. banner(licenseFile) {
  263. return `License information can be found in ${licenseFile}`;
  264. }
  265. }
  266. })
  267. ```
  268. ##### `filename`
  269. Type: `String|Function<(string) -> String>`
  270. Default: `${file}.LICENSE`
  271. The file where the extracted comments will be stored.
  272. Default is to append the suffix `.LICENSE` to the original filename.
  273. ```js
  274. // in your webpack.config.js
  275. new TerserPlugin({
  276. extractComments: {
  277. condition: /^\**!|@preserve|@license|@cc_on/i,
  278. filename: 'extracted-comments.js',
  279. banner(licenseFile) {
  280. return `License information can be found in ${licenseFile}`;
  281. }
  282. }
  283. })
  284. ```
  285. ##### `banner`
  286. Type: `Boolean|String|Function<(string) -> String>`
  287. Default: `/*! For license information please see ${commentsFile} */`
  288. The banner text that points to the extracted file and will be added on top of the original file.
  289. Can be `false` (no banner), a `String`, or a `Function<(string) -> String>` that will be called with the filename where extracted comments have been stored.
  290. Will be wrapped into comment.
  291. ```js
  292. // in your webpack.config.js
  293. new TerserPlugin({
  294. extractComments: {
  295. condition: true,
  296. filename(file) {
  297. return `${file}.LICENSE`;
  298. },
  299. banner(commentsFile) {
  300. return `My custom banner about license information ${commentsFile}`;
  301. }
  302. }
  303. })
  304. ```
  305. ### `warningsFilter`
  306. Type: `Function<(warning, source) -> Boolean>`
  307. Default: `() => true`
  308. Allow to filter [terser](https://github.com/fabiosantoscode/terser) warnings.
  309. Return `true` to keep the warning, `false` otherwise.
  310. ```js
  311. // in your webpack.config.js
  312. new TerserPlugin({
  313. warningsFilter: (warning, source) => {
  314. if (/Dropping unreachable code/i.test(warning)) {
  315. return true;
  316. }
  317. if (/filename\.js/i.test(source)) {
  318. return true;
  319. }
  320. return false;
  321. },
  322. })
  323. ```
  324. ## Examples
  325. ### Cache And Parallel
  326. Enable cache and multi-process parallel running.
  327. ```js
  328. // in your webpack.config.js
  329. const TerserPlugin = require('terser-webpack-plugin');
  330. module.exports = {
  331. //...
  332. optimization: {
  333. minimizer: [
  334. new TerserPlugin({
  335. cache: true,
  336. parallel: true
  337. })
  338. ]
  339. }
  340. };
  341. ```
  342. ### Preserve Comments
  343. Extract all legal comments (i.e. `/^\**!|@preserve|@license|@cc_on/i`) and preserve `/@license/i` comments.
  344. ```js
  345. // in your webpack.config.js
  346. const TerserPlugin = require('terser-webpack-plugin');
  347. module.exports = {
  348. //...
  349. optimization: {
  350. minimizer: [
  351. new TerserPlugin({
  352. terserOptions: {
  353. output: {
  354. comments: /@license/i
  355. }
  356. },
  357. extractComments: true
  358. })
  359. ]
  360. }
  361. };
  362. ```
  363. ### Custom Minify Function
  364. Override default minify function - use `uglify-js` for minification.
  365. ```js
  366. // in your webpack.config.js
  367. const TerserPlugin = require('terser-webpack-plugin');
  368. module.exports = {
  369. //...
  370. optimization: {
  371. minimizer: [
  372. new TerserPlugin({
  373. // Uncomment lines below for cache invalidation correctly
  374. // cache: true,
  375. // cacheKeys(defaultCacheKeys) {
  376. // delete defaultCacheKeys.terser;
  377. //
  378. // return Object.assign(
  379. // {},
  380. // defaultCacheKeys,
  381. // { 'uglify-js': require('uglify-js/package.json').version },
  382. // );
  383. // },
  384. minify(file, sourceMap) {
  385. // https://github.com/mishoo/UglifyJS2#minify-options
  386. const uglifyJsOptions = {
  387. /* your `uglify-js` package options */
  388. };
  389. if (sourceMap) {
  390. uglifyJsOptions.sourceMap = {
  391. content: sourceMap,
  392. };
  393. }
  394. return require('uglify-js').minify(file, uglifyJsOptions);
  395. },
  396. })
  397. ]
  398. }
  399. };
  400. ```
  401. ## Contributing
  402. Please take a moment to read our contributing guidelines if you haven't yet done so.
  403. [CONTRIBUTING](./.github/CONTRIBUTING.md)
  404. ## License
  405. [MIT](./LICENSE)
  406. [npm]: https://img.shields.io/npm/v/terser-webpack-plugin.svg
  407. [npm-url]: https://npmjs.com/package/terser-webpack-plugin
  408. [node]: https://img.shields.io/node/v/terser-webpack-plugin.svg
  409. [node-url]: https://nodejs.org
  410. [deps]: https://david-dm.org/webpack-contrib/terser-webpack-plugin.svg
  411. [deps-url]: https://david-dm.org/webpack-contrib/terser-webpack-plugin
  412. [tests]: https://img.shields.io/circleci/project/github/webpack-contrib/terser-webpack-plugin.svg
  413. [tests-url]: https://circleci.com/gh/webpack-contrib/terser-webpack-plugin
  414. [cover]: https://codecov.io/gh/webpack-contrib/terser-webpack-plugin/branch/master/graph/badge.svg
  415. [cover-url]: https://codecov.io/gh/webpack-contrib/terser-webpack-plugin
  416. [chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
  417. [chat-url]: https://gitter.im/webpack/webpack
  418. [size]: https://packagephobia.now.sh/badge?p=terser-webpack-plugin
  419. [size-url]: https://packagephobia.now.sh/result?p=terser-webpack-plugin