原创 shimming

在webpack 打包過程中,我們往往要做代碼兼容或者打包過程的兼容。 比如我們之前使用的babel-polyfill 。 我們來講一個例子,有一個第三方代碼,如下。 export function ui () { $('bod

原创 SplitChunksPlugin 配置參數

上面我們使用了 webpack 中的代碼分割。我們知道webpack 代碼分割,底層使用了 SplitChunksPlugin 插件。那麼下面,我們來寫寫這個插件可以進行配置的一些參數。 我們上篇的代碼如下。index.js  func

原创 Lazy Loading 懶加載與Chunk

我們接着上文例子繼續寫,因爲lazy loading , chunk 是之前就有遇到的。 我們刪除上文中src/test.js 文件。 我們放開index.js 中引入並使用lodash 的註釋代碼,如下 // sync import

原创 SplitChunksPlugin 配置參數 2

我們繼續上篇,探索一下splitChunks 的配置。 我們在項目的 src 下新建一個文件 test.js 導出一個很少的內容,如下。 export default { name: 'Me a Test' } 然後我們將入口

原创 css 文件的代碼分割

之前寫的都是js 代碼分割,下面來看看css 代碼分割。 先看看webpack.config.js 如下 const path = require('path'); const HtmlWebpackPlugin = require('

原创 打包分析,Preloading,Prefetching

打包分析,是指當我們使用webpack 對項目進行打包之後,可以使用打包分析工具,來對我們打包生成的文件進行分析,來看看打包是否合理。 webpack 官方提供了它的一個分析工具的github 倉庫:https://github.com/

原创 webpack Hot Module Replacement 熱模塊替換

我們先改一下 index.js  文件。如下。 import './style.css'; var button = document.createElement('button'); button.innerHTML = "新增";

原创 nvm - node版本管理

nvm 是node 的版本管理工具,可切換多個node 版本 在Mac 上,只需要使用 Homebrew 下載 nvm 即可。 brew install nvm 使用nvm 也很簡單 nvm list 查看當前所有的node 版本 nv

原创 webpack 與 code splitting 2

前面一篇,我們自己手動進行了代碼分割。 我們在使用 webpack 的時候,一般都會使用 code splitting。因爲webpack 中有一些插件可以讓我們非常容易地進行 code splitting。 在 webpack4 中有一

原创 HTTP CSP

Content Security Policy (CSP) https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP 它體現在:  - 限制資源獲取  - 報告資源獲取越權 限制方

原创 HTTP 數據協商

數據協商,即客戶端發送給服務端一個請求的時候,客戶端會申明希望拿到的數據的格式以及數據相關的一些限制,而服務端會根據這些請求中表示的想要的限制,來進行判斷要返回一個怎樣的數據。 分類  - 請求 Accept     通過 “Accept

原创 HTTP Redirect

Redirect 是指,當我們通過URL 訪問一個資源的時候,我們可能會發現,這個資源已經不在這個URL 所指向的位置了。這個時候,服務器要告訴瀏覽器/客戶端,要請求的資源在什麼地方,然後瀏覽器/客戶端再去重新請求那個地方,這樣的話,就可

原创 HTTP 長連接

HTTP 請求是在TCP連接上進行發送的。而TCP的連接分爲:長連接,短連接。 長連接:HTTP 請求發送的時候,要先去創建一個TCP連接,然後在這個TCP連接上,把HTTP 的請求發送並接受完。一次HTTP請求結束了,瀏覽器就會跟服務端

原创 Cookie

cookie Cookie 是服務端返回數據的時候,通過 Set-Cookie 這個 header,設置到瀏覽器中,並保存在瀏覽器中的內容。 瀏覽器保存了這個Cookie 後,下次在同域的請求中,就會帶上這個Cookie。 Cookie

原创 緩存頭 Cache-Control 的含義和使用

本篇我們來寫一下HTTP 中的緩存,即Cache-Control 。 Cache-Control 的可緩存性(指明哪些地方可以緩存返回的數據):   - public (HTTP 返回的時候在Heaher 中設置Cache-Control