codecamp

Parcel 生产环境(Production)

✨ 生产环境(Production)

当需要打包你的应用程序的时候,你可以使用 Parcel 的生产模式。

parcel build entry.js

最优化

这将关闭监听模式和热模块替换,所以它只会编译一次。它还会开启 minifier 来减少输出包文件的大小。Parcel 使用的 minifiers 有 JavaScript 的 terser ,CSS 的 cssnano 还有 HTML 的 htmlnano

启动生产模式还会设置环境变量 NODE_ENV=production 。像 React 这种只用开发调试功能的大型库,通过设置这个环境变量来禁用调试功能,从而构建得更小更快。

若要利用一些仅开发调试才有的特性,要确保terser's dead_code option是开启的状态(默认开启)并且将仅开发调试代码包裹在条件检测中:

if (process.env.NODE_ENV === 'development') {
  // 或, `process.env.NODE_ENV !== 'production'`
  // 仅在开发环境下运行并将在生产环境下剔除.
}

文件命名策略

为了对你的 cdn 设置非常激进的缓存规则,以获得最佳性能和效率,Parcel 将会给大多数 bundles 文件名添加 hash(根据 bundle 包是否有可读/可记忆的名称,主要用于 SEO)

Parcel 在命名 bundles 文件时,遵循以下表格(入口文件不会被 hash 处理)

Bundle TypeTypeContent hashed
AnyEntrypoint
JavaScript<script>
JavaScriptDynamic import
JavaScriptService worker
HTMLiframe
HTMLanchor link
Raw (Images, text files, ...)Import/Require/...

文件哈希遵循以下命名模式:<directory name>-<hash>.<extension>

跨平台陷阱

为了优化生产环境的构建性能,在运行 build 命令的机器上 Parcel 将尝试确定可用的 CPU 数量,以便相应地分配工作。为此,Parcel 依赖于physical-cpu-count

请注意,此模块假定您的系统中提供了lscpu程序

使用 CI

如果要将 Parcel 集成到持续集成系统中(例如 Travis 或 Circle CI)中,则可能需要将 Parcel 安装为本地依赖项。

这里是说明


Parcel 热模块重载(HMR)
Parcel CLI
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }