webpack如何Code Splitting拆分代碼splitChunks

webpack如何Code Splitting拆分代碼splitChunks

webpack中的三個概念module、chunk和bundle 研究splitChunks之前,我們必須先弄明白這三個名詞是什麼意思,主要是chunk的含義,要不然你就不知道splitChunks是在什麼的基礎上進行拆分。《what are module,chunk and bundle in webpack》 module:就是js的模塊化webpack支持commonJS、ES6等模塊化規範,簡單來說就是你通過import語句引入的代碼。 chunk: chunk是webpack根據功能拆分出來的,包含三種情況:...

[Node.js] npm 與 yarn 指令比較

[Node.js] npm 與 yarn 指令比較

yarn加速安裝的秘密 yarn 在於根目錄下.yarn-cache這個資料夾,會將每次安裝套件先cache一份到這來,往後如果需要相同套件,就會從這邊拉。 大多數的指令用法和原本並無差異,只要將 npm 換成 yarn即可,特別要注意的是 npm install [package] 安裝少數套件在 yarn 是不支援的,yarn 的套件都是必須儲存 (--save)。 npm與yarn指令比較表 NPM Yarn 說明 npm install yarn install - npm install [package] X...

webpack如何Code Splitting拆分代碼splitChunks

Javascript二維陣列Array轉換一維陣列及filter過濾重複值

二維陣列扁平化 三種不同的解決方法 將二維陣列合併為單一的陣列 給定一個陣列: var myArray = [[1, 2],[3, 4, 5], [6, 7, 8, 9]]; 我們想得到這個結果: [1, 2, 3, 4, 5, 6, 7, 8, 9] 方法一: var myNewArray = []; for (var i = 0; i 方法二: var myNewArray = myArray.reduce(function(prev, curr) { return prev.concat(curr); }); // [1,...

React上傳文件使用react-input-files讀取Excel js-xlsx

React上傳文件使用react-input-files讀取Excel js-xlsx

介紹 SheetJS js-xlsx 是一款能夠讀寫Excel的.xls、.xlsx格式表格的插件,瀏覽器支持良好,並且能在多個平台上使用,目前在github上有12602個star,在這邊的範例主要使用React,再加上SheetJS js-xlsx及react-input-files,讓你一個按鈕,簡單的實現直接選檔上傳。 使用 安裝依賴 進入項目文件夾,安裝xlsx與react-input-files npm install xlsx npm install react-input-files 在專案中引入 import...

React上傳文件使用react-input-files讀取Excel js-xlsx

react-router 4 index路由始終處於active狀態

react-router 4中NavLink可加入activeClassName=\'active\'屬性,使得選單在切換時class加入active,可對這個active class寫css style樣式,達到選單切換的效果。 設定成以下,to="/"表示index首頁,但是他都會一只處於active狀態,並不會因為像切換其他的選單而改變。 <navlink activeclassname="'active'" to="/"> Home...

webpack如何Code Splitting拆分代碼splitChunks

如何使用Javascript indexOf方法索引key尋找物件陣列object array?

獲取包含物件的陣列的索引的最佳方法是什麼? 想像這種情況: var myArray = [ //陣列的索引0 { hello: 'leon', foo: 'baz' }, //陣列的索引1 { hello: 'stevie', foo: 'zoo' } ] 在這個例子中,若想使用indexOf方法取得它將是。hello:\'stevie\' 索引的值為 1要如何做呢? map().indexOf()...

webpack如何Code Splitting拆分代碼splitChunks

Javascript ES6好用的模版字符串template literal

在 ES6 中,我們多了一個非常好用的模版字符串(template literal),如果你會在 JS 中「放入 HTML 的內容」、或者有「很長的字串包含換行」、又或者會有「字串連結變數」這樣的需求,模版字符串會是非常方便的作法。 另外,在 ES6 中可以將模版字符串和函式結合使用,形成一個標籤模版(tagged template),可以以此過濾 HTML 字串,避免使用者輸入惡意內容。 模版字符串(template literal)的基本應用 模版字符串的使用非常簡單,就是使用反引號" `...