Yêu cầu thg 9 4, 2018 8:19 SA 310 1 3
  • 310 1 3
+2

Tại sao khi build trang web phía browser luôn convert lại tên của các js css về dạng 1 ký tự ?

Chia sẻ
  • 310 1 3

Theo mọi người thì tại sao ở những file vendor, code javascript, người ta hay convert hết tên biến và tên hàm về dạng chỉ bao gồm 1 ký tự chứ ko để đầy đủ, tường minh như ban đầu? Kiểu như, khi code, lập trình viên sẽ đặt tên hàm là function calculateSumOfTwoNumbers( ) { }, nhưng khi publish code thì sẽ đặt lại là 1 ký tự gì đó, ví dụ function c( ) { }

function P(e, t, o, i) {
  o.updateBound = i, window.addEventListener('resize', o.updateBound, {
    passive: !0
  });
  var r = n(e);
  return H(r, 'scroll', o.updateBound, o.scrollParents), o.scrollElement = r, o.eventsEnabled = !0, o
}

function A() {
  this.state.eventsEnabled || (this.state = P(this.reference, this.options, this.state, this.scheduleUpdate))
}
Avatar Mogami @Xitrum
thg 9 4, 2018 4:08 CH

Mình cũng thích phong cách này.

  1. Cho nó nhẹ load nhanh
  2. Để người copy tập đọc cho quen, vì nhiều người Minify 😄
  3. Thứ 3, lừa sếp (leader, cái thằng sếp (leader) mà nó đọc code như thế này nó đọc được 1/2 là đi uống trà rồi (nó chỉ cần đầu vào là gì, đầu ra là gì thôi ..)
  4. Hắc não mấy thằng nhận transfer
  5. Thì theo su hướng thôi ( 1 dòng code, mà nhiều quá thì 1 dòng cái méo gì đẹp nữa 😄)

3 CÂU TRẢ LỜI


Đã trả lời thg 9 4, 2018 8:32 SA
Đã được chấp nhận
+5

nhưng khi publish code thì sẽ đặt lại là 1 ký tự gì đó, ví dụ function c( ) { }

Việc khi publish code tên biến bị thay đổi không phải là do người viết code cố tình sửa lại thế, mà là do code đã qua công đoạn minify, bởi một tool npm nào đó, như uglify-js, minifier, babel-minify ... bạn ạ. Lúc đó code sẽ được tối giản hết mức để có được kích thức nhỏ nhất có thể.

Các cách để tối giản code thì như bạn đã nói, có thể là rút ngắn tên biến, tên hàm còn a, b, C ... loại bỏ các dấu xuống dòng, khoảng trắng, index ...

Ngoài ra trong đoạn code của bạn còn có một phương pháp nữa, đó là ở đoạn passive: !0. Mình đoán là khi code mọi người sẽ viết passive: true, nhưng qua công đoạn minify, nó đã trở thành passive: !0, đơn giản vì viết chữ true tốn đến 4 ký tự, còn viết !0 thì chỉ mất 2 ký tự thôi. 😂 Các công cụ minify nó tính toán chi ly đến thế cơ bạn ạ, nên cũng không có gì khó hiểu khi nó đặt lại tên biến, tên hàm cho ngắn gọn cả 😂

Chia sẻ
thg 9 4, 2018 8:40 SA

Nhưng theo em được biết Minify chỉ dùng để xóa khoảng trắng và co code về 1 dòng còn việc convert cả name function này thí chưa thấy. Với lại nếu có nhiều function A() giống nhau thì biết code mình đang gọi về hàm nạo ạ ??

thg 9 4, 2018 8:42 SA

Với là chắc người ta thích trở về thời code C 1 is True, 0 is False đó a =))

Avatar Tran Duc Thang @thangtd90
thg 9 4, 2018 10:05 SA

@tuanbacyen

Nhưng theo em được biết Minify chỉ dùng để xóa khoảng trắng và co code về 1 dòng còn việc convert cả name function này thí chưa thấy

Nó cũng tuỳ vào thư viện mà em dùng, với cả tuỳ vào từng option của các thư viện đó nữa em ạ 😄

Ví dụ như em có thể vào đây để test package Uglify JS

https://skalman.github.io/UglifyJS-online/

Em click nút option sẽ thấy nó có rất nhiều option khác nhau đấy 😄

Anh test với đoạn code này

function bubbleSort    (list) {
var items = list.slice(0), swapped =false,
        p,   q;
   for ( p= 1;p <   items.length; ++p) {
       for (q=0; q < items.length -    p; ++q) {
        if (items[q + 1  ] < items[q]) {
            swapped =true;
        let temp = items[q];
         items[q] = items[ q+1]; items[q+1] = temp;
            }
      }
        if (!swapped)
        break;
    }
       return items;
}

thì được

function bubbleSort(e){var r,t,f=e.slice(0),l=!1;for(r=1;r<f.length;++r){for(t=0;t<f.length-r;++t)if(f[t+1]<f[t]){l=!0;let e=f[t];f[t]=f[t+1],f[t+1]=e}if(!l)break}return f}

Còn nếu em thấy có nhiều function có tên giống nhau, thì có nghĩa là chúng đang được đặt ở những scope khác nhau rồi 😄 Không có chuyện 2 function ở cùng một scope mà có cùng tên đâu 😄

thg 9 4, 2018 10:10 SA

@thangtd90 ok thank anh ạ =))

Đã trả lời thg 9 4, 2018 8:23 SA
+4

Những file đó đã được Minify thành như vậy đó bạn. Mục đích của việc Minify để giảm kích thước của các file js đó đi, giúp client load những file đó nhanh hơn

Chia sẻ
thg 9 4, 2018 8:40 SA

Lợi ích khác của việc convert như vậy đối với 1 số vendor thì còn để obfuscate code, giấu đi cách implement chức năng (để tránh bị cạnh tranh, chôm ý tưởng chẳng hạn) 😆

thg 9 4, 2018 8:40 SA

Nhưng theo mình được biết Minify chỉ dùng để xóa khoảng trắng và co code về 1 dòng còn việc convert cả name function này thí chưa thấy. Với lại nếu có nhiều function A() giống nhau thì biết code mình đang gọi về hàm nạo ạ ??

thg 9 4, 2018 8:48 SA

@vigov5 Vậy nếu function có trùng tên sau khi Minify thì sao bạn ??

thg 9 4, 2018 9:15 SA

khi parse toàn bộ source code của lib rồi thì sẽ biết được là có những class, module nào, global variable nào, mỗi class, module có method, có prototype nào. Khi đã liệt kê được ra hết rồi thì cứ đổi tên lần lượt thôi, từ a -> z, thiếu thì từ aa -> az, v..v, sẽ đảm bảo là ko bị trùng, vì dù cho là trùng tên nhưng khác scope thì vẫn khác nhau thôi, ví dụ cùng tên là a nhưng A.a()B.a() vẫn khác nhau 😃

thg 9 4, 2018 10:11 SA

@vigov5 Có lý nha 😄

Đã trả lời thg 9 6, 2018 3:23 CH
+2

để Thế giới di động có thể load trong 1 nốt nhạc =)) https://www.thegioididong.com/

Chia sẻ
thg 9 7, 2018 7:58 SA

😃)

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí