原创 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