用于生产的 Preact 和 Webpack

Posted 2023-02-16

【中文标题】用于生产的 Preact 和 Webpack

【英文标题】：Preact and Webpack for Production

【发布时间】：2017-06-08 10:35:39

【问题描述】：

只是想确保我为生产设置了正确的 preact js。

在我使用 preact 的 webpack 设置中，运行 npm run build 我注意到使用 Bundle Analyzer Plugin 的 preact js 文件的路径是

/node_modules/preact/dist/preact.js 而不是

/node_modules/preact/dist/preact.min.js

我也设置了 uglify 和 minify js，但只是觉得奇怪的是缩小的包没有被拾取？

webpack 中的入口脚本

  entry:  app: './src/index.js', vendor: [ 'preact', 'preact-router' ] ,

Npm 运行构建脚本

   "build": "cross-env NODE_ENV=production webpack --progress -p --display-modules --display-chunks"

【参考方案1】：

preact 的默认 main 是 dist/preact.js - preact.min.js 是为那些想要在不应用自己的缩小时利用缩小的人（例如，人们从 CDN 热链接它）并测量真实-世界输出大小。

您已经通过运行带有-p 标志的webpack 将UglifyJS 应用到您的包中，因此您不必太担心尝试使用dist/preact.min.js。它可以节省几个字节，但没什么大不了的。您正在使用的文件 (dist/preact.js) 实际上已经由 Preact 通过 UglifyJS 运行，它只是没有被压缩但没有被破坏（所以变量名保持不变）。