小编Nof*_*ofi的帖子

npm run build 没有缩小reactJs项目

我从reactJs App根文件夹执行了npm命令“npm run build”，并在控制台中生成了以下输出的“build”文件夹。

    File sizes after gzip:

  646.8 KB  build\static\js\2.d370d4e1.chunk.js
  12.46 KB  build\static\js\main.fec451dd.chunk.js
  823 B     build\static\css\main.fc109ae9.chunk.css
  772 B     build\static\js\runtime-main.83c3e0c4.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  serve -s build

Run Code Online (Sandbox Code Playgroud)

然后我执行命令“serve -s build”并在控制台中得到以下输出。

INFO: Accepting connections at http://localhost:5000

Run Code Online (Sandbox Code Playgroud)

我可以看到所有未在开发人员工具中缩小的 *.tsx 文件。不确定我做错了什么以及为什么下面提到的“js”文件夹中的文件没有缩小。

包.json

 {
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": …

Run Code Online (Sandbox Code Playgroud)

minify reactjs react-scripts npm-build

Nof*_*ofi

2020 12-27

7
推荐指数

2
解决办法

8550
查看次数

需要将烤箱对中并使其固定

即使消息长度不同,我也试图将烤箱消息框对齐.烤面包机宽度应根据消息而变化.请查看CSS代码中的内联注释.那是我很困惑.

我的代码

HTML

  <body>
    <div class="alert alert-danger toast">
      <span class="msgText"></span>
    </div>
    <div class="moreHeight"></div>
  </body>

Run Code Online (Sandbox Code Playgroud)

CSS

.toast {
    margin: 0px auto;
    position: fixed;/*This is must for me. Toaster should be in same place even I scroll to bottom.*/
    z-index: 9999;
    margin-left: 35%;/*Should not be hardcoded since message length is not static*/
   /* width :50%;/*Need to be removed. Width should be dynamic based on messahe length*/
}

/*To check on scrolling toaster is visible at top*/
.moreHeight{
  height:1200px;
}

Run Code Online (Sandbox Code Playgroud)