- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想用 source-map-explorer 分析我的 Next.js 构建.有人可以帮我写脚本吗?
对于 React (CRA),我使用以下脚本:
"build:analyze": "npm run build && source-map-explorer 'build/static/js/*.js'",
npm run build:analyze
是否有类似的方法来分析.next
中的构建?
更新.next/
文件结构:
.next
├── BUILD_ID
├── build-manifest.json
├── cache
│ └── webpack
│ ├── client-production
│ │ ├── 0.pack
│ │ └── index.pack
│ └── server-production
│ ├── 0.pack
│ └── index.pack
├── export-marker.json
├── images-manifest.json
├── prerender-manifest.json
├── react-loadable-manifest.json
├── required-server-files.json
├── routes-manifest.json
├── server
│ ├── chunks
│ │ ├── 129.js
│ │ ├── 398.js
│ │ ├── 50.js
│ │ ├── 649.js
│ │ ├── 664.js
│ │ ├── 690.js
│ │ ├── 803.js
│ │ ├── 825.js
│ │ └── 859.js
│ ├── font-manifest.json
│ ├── pages
│ │ ├── 404.js
│ │ ├── 500.html
│ │ ├── _app.js
│ │ ├── _document.js
│ │ ├── _error.js
│ │ ├── api
│ │ │ └── get-config.js
│ │ ├── auth
│ │ │ ├── login-error.js
│ │ │ ├── login-success.js
│ │ │ └── vendor-repair.js
│ │ ├── help.js
│ │ ├── home.js
│ │ ├── index.js
│ │ ├── onboarding.js
│ │ ├── photo-gallery-details.js
│ │ ├── photo-gallery.js
│ │ ├── popup.js
│ │ ├── practise.js
│ │ ├── privacy-policy.js
│ │ ├── profile.js
│ │ ├── reference-documents.js
│ │ ├── repair-details.js
│ │ ├── repair-request.js
│ │ ├── stage-area.js
│ │ ├── store-comments.js
│ │ ├── store-visit-checklist.js
│ │ ├── store-visit-history.js
│ │ ├── visual-merchandise-details.js
│ │ └── visual-merchandise.js
│ ├── pages-manifest.json
│ └── webpack-runtime.js
└── static
├── chunks
│ ├── 29107295-62449f6ab50432c0efef.js
│ ├── 475-f51e5d80bd683f3b5684.js
│ ├── 4a3ea9cd-27e375e040b0a04d492d.js
│ ├── 514-2f11410f8595f17ec257.js
│ ├── framework-c179ed8d0295df0a6019.js
│ ├── main-c9abfc3dcd7802a764ed.js
│ ├── pages
│ │ ├── 404-8481e9d7d36e8670eb39.js
│ │ ├── _app-eb5037c043313bbfb3fc.js
│ │ ├── _error-a33892d286e78bfa334d.js
│ │ ├── auth
│ │ │ ├── login-error-8141cf890a77a08b5fd7.js
│ │ │ ├── login-success-494df6631cb3f5141e9a.js
│ │ │ └── vendor-repair-bed782e18fed509b3903.js
│ │ ├── help-e318e021fc815ad4c48a.js
│ │ ├── home-c6c8b871ab5c5738665e.js
│ │ ├── index-bd34bcc4cc28f9419b8d.js
│ │ ├── onboarding-07120812010a84501867.js
│ │ ├── photo-gallery-details-f515c1b20e11f414190b.js
│ │ ├── photo-gallery-e3972e175274149dba6b.js
│ │ ├── popup-81f14fa216f8b1def307.js
│ │ ├── practise-2b8d378b633a9b426aab.js
│ │ ├── privacy-policy-5c65687e77deed0661a0.js
│ │ ├── profile-58058efb871cd14f8a2e.js
│ │ ├── reference-documents-6507fb50d903d9b6881e.js
│ │ ├── repair-details-e2e94513e20e98f7e274.js
│ │ ├── repair-request-26a0d3902ac752eafeab.js
│ │ ├── stage-area-64d34fda6a621eecdc1c.js
│ │ ├── store-comments-9dbd60b5353c708b220b.js
│ │ ├── store-visit-checklist-411682c351d799fe983a.js
│ │ ├── store-visit-history-224243943fdb8ae73663.js
│ │ ├── visual-merchandise-88be768dfe1fc5ada55f.js
│ │ └── visual-merchandise-details-c102d8d548e4757a72e6.js
│ ├── polyfills-7b08e4c67f4f1b892f4b.js
│ └── webpack-e5108aeecfc3e7f070df.js
├── css
│ ├── 03632b0eee83f601f359.css
│ └── f999bd706539c2e100c7.css
├── media
│ ├── Metropolis-Medium.251ab6a3f9cf79779269596ecbe28574.eot
│ ├── Metropolis-Medium.a8208f13e1711b160eabc04bafbd04d9.ttf
│ ├── Metropolis-Medium.bff42e1c5682f2689bdc8e47a3753b27.woff2
│ ├── Metropolis-Medium.f23d75633ae80143c0f4d819d6a0d323.woff
│ ├── Metropolis-Regular.360d0f5a8067816addd5a4da45aaa660.eot
│ ├── Metropolis-Regular.b54f45f08c62b81d0078de96bb920cd9.ttf
│ ├── Metropolis-Regular.cd75f7c84a6375cdee1928c936c13a20.woff
│ ├── Metropolis-Regular.e90dcb53335abcd72603e0718c6c8cd2.woff2
│ ├── Metropolis-SemiBold.03a3e314fb58e1b6fe4104e24dee09a7.woff
│ ├── Metropolis-SemiBold.1c6f27c0abbd4b2a94f84e21efc14265.eot
│ ├── Metropolis-SemiBold.3af64c0941a01fed6ea3e61028323897.woff2
│ ├── Metropolis-SemiBold.bdaa1ae71421dd75bb29537a78b2ed08.ttf
│ ├── ajax-loader.fb6f3c230cb846e25247dfaa1da94d8f.gif
│ ├── helveticaneue-bold.54da3e9e715c351fef284c8fe3d191d2.eot
│ ├── helveticaneue-bold.80c2aa2e5c685eae489425fd673346f0.woff
│ ├── helveticaneue-bold.b17142a9ee042ff5cfecce7bc12f3513.ttf
│ ├── helveticaneue-bold.b82ee7f1ae8568f0d6bae2b98b4bff46.svg
│ ├── helveticaneue-bold.f66775fae72ac8325a23028c5accda16.woff2
│ ├── helveticaneue-light.61226a60a0b5787be0fba7d142ee703d.woff2
│ ├── helveticaneue-light.6e3ec2feb1535ebf53e9f4d25dcfa94f.woff
│ ├── helveticaneue-light.d846f89ab1d295bd315d9c71167df502.svg
│ ├── helveticaneue-light.ddf262cb96782fefcbc8984c8131a471.eot
│ ├── helveticaneue-light.fb11a81f919945d13c73b549d4e7e1e1.ttf
│ ├── helveticaneue-medium.29744a2c2edcc640ecb99d2de05f9c2e.woff
│ ├── helveticaneue-medium.4a368f8dd72410bb7e6ffe37e91100c4.ttf
│ ├── helveticaneue-medium.54e305719b6cfc7db698fa584ea9e738.woff2
│ ├── helveticaneue-medium.8aca99ab7abac084902d2fcd8a68625e.svg
│ ├── helveticaneue-medium.bfaaa603f19e12a88d35305f96b4b25f.eot
│ ├── slick.2630a3e3eab21c607e21576571b95b9d.svg
│ ├── slick.295183786cd8a138986521d9f388a286.woff
│ ├── slick.a4e97f5a2a64f0ab132323fbeb33ae29.eot
│ └── slick.c94f7671dcc99dce43e22a89f486f7c2.ttf
└── pNP1560UJNYEPcr4n-2-U
├── _buildManifest.js
└── _ssgManifest.js
最佳答案
我最近使用 source-map-explorer
配置了 next.js
。
请按照以下步骤操作:
安装source-map-explorer
:
npm install -D source-map-explorer
更新 next.config.js
文件:
module.exports = {
productionBrowserSourceMaps: true
// ...Other configs if any.
}
添加脚本:
"scripts": {
"analyze": "source-map-explorer .next/static/**/*.js",
"build": "next build",
"build:analyze": "npm run build && npm run analyze"
}
PS:如果生成源映射,您可能需要删除 .next
文件夹,然后运行命令。
关于javascript - Next.js:如何在 Next.js 中使用 source-map-explorer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67916628/
我正在学习构建单页应用程序 (SPA) 所需的所有技术。总而言之,我想将我的应用程序实现为单独的层,其中前端仅使用 API Web 服务(json 通过 socket.io)与后端通信。前端基本上是
当我看到存储在我的数据库中的日期时。 这是 正常 。日期和时间就是这样。 但是当我运行 get 请求来获取数据时。 此格式与存储在数据库 中的格式不同。为什么会发生这种情况? 最佳答案 我认为您可以将
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我正在尝试使用backbone.js 实现一些代码 和 hogan.js (http://twitter.github.com/hogan.js/) Hogan.js was developed ag
我正在使用 Backbone.js、Node.js 和 Express.js 制作一个 Web 应用程序,并且想要添加用户功能(登录、注销、配置文件、显示内容与该用户相关)。我打算使用 Passpor
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我尝试在 NodeJS 中加载数据,然后将其传递给 ExpressJS 以在浏览器中呈现 d3 图表。 我知道我可以通过这种方式加载数据 - https://github.com/mbostock/q
在 node.js 中,我似乎遇到了相同的 3 个文件名来描述应用程序的主要入口点: 使用 express-generator 包时,会创建一个 app.js 文件作为生成应用的主要入口点。 通过 n
最近,我有机会观看了 john papa 关于构建单页应用程序的精彩类(class)。我会喜欢的。它涉及服务器端和客户端应用程序的方方面面。 我更喜欢客户端。在他的实现过程中,papa先生在客户端有类
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我是一个图形新手,需要帮助了解各种 javascript 2D 库的功能。 . . 我从 Pixi.js 中得到了什么,而我没有从 Konva 等基于 Canvas 的库中得到什么? 我从 Konva
我正在尝试将一些 LESS 代码(通过 ember-cli-less)构建到 CSS 文件中。 1) https://almsaeedstudio.com/ AdminLTE LESS 文件2) Bo
尝试查看 Express Passport 中所有登录用户的所有 session ,并希望能够查看当前登录的用户。最好和最快的方法是什么? 我在想也许我可以在登录时执行此操作并将用户模型数据库“在线”
我有一个 React 应用程序,但我需要在组件加载完成后运行一些客户端 js。一旦渲染函数完成并加载,运行与 DOM 交互的 js 的最佳方式是什么,例如 $('div').mixItUp() 。对
请告诉我如何使用bodyparser.raw()将文件上传到express.js服务器 客户端 // ... onFilePicked(file) { const url = 'upload/a
我正在尝试从 Grunt 迁移到 Gulp。这个项目在 Grunt 下运行得很好,所以我一定是在 Gulp 中做错了什么。 除脚本外,所有其他任务均有效。我现在厌倦了添加和注释部分。 我不断收到与意外
我正在尝试更改我的网站名称。找不到可以设置标题或应用程序名称的位置。 最佳答案 您可以在 config/ 目录中创建任何文件,例如 config/app.js 包含如下内容: module.expor
经过多年的服务器端 PHP/MySQL 开发,我正在尝试探索用于构建现代 Web 应用程序的新技术。 我正在尝试对所有 JavaScript 内容进行排序,如果我理解得很好,一个有效的解决方案可以是服
我是 Nodejs 的新手。我在 route 目录中有一个 app.js 和一个 index.js。我有一个 app.use(multer....)。我还定义了 app.post('filter-re
我正在使用 angular-seed用于构建我的应用程序的模板。最初,我将所有 JavaScript 代码放入一个文件 main.js。该文件包含我的模块声明、 Controller 、指令、过滤器和
我是一名优秀的程序员,十分优秀!