原创 shimming
在webpack 打包過程中，我們往往要做代碼兼容或者打包過程的兼容。 比如我們之前使用的babel-polyfill 。 我們來講一個例子，有一個第三方代碼，如下。 export function ui () { $('bod
2019-09-04 20:43:09
原创 SplitChunksPlugin 配置參數
上面我們使用了 webpack 中的代碼分割。我們知道webpack 代碼分割，底層使用了 SplitChunksPlugin 插件。那麼下面，我們來寫寫這個插件可以進行配置的一些參數。 我們上篇的代碼如下。index.js func
2019-08-28 21:35:59
原创 Lazy Loading 懶加載與Chunk
我們接着上文例子繼續寫，因爲lazy loading , chunk 是之前就有遇到的。 我們刪除上文中src/test.js 文件。 我們放開index.js 中引入並使用lodash 的註釋代碼，如下 // sync import
2019-08-28 21:35:59
原创 SplitChunksPlugin 配置參數 2
我們繼續上篇，探索一下splitChunks 的配置。 我們在項目的 src 下新建一個文件 test.js 導出一個很少的內容，如下。 export default { name: 'Me a Test' } 然後我們將入口
2019-08-28 21:35:59
原创 css 文件的代碼分割
之前寫的都是js 代碼分割，下面來看看css 代碼分割。 先看看webpack.config.js 如下 const path = require('path'); const HtmlWebpackPlugin = require('
2019-08-28 21:35:59
原创 打包分析，Preloading，Prefetching
打包分析，是指當我們使用webpack 對項目進行打包之後，可以使用打包分析工具，來對我們打包生成的文件進行分析，來看看打包是否合理。 webpack 官方提供了它的一個分析工具的github 倉庫：https://github.com/
2019-08-28 21:35:59
原创 webpack Hot Module Replacement 熱模塊替換
我們先改一下 index.js 文件。如下。 import './style.css'; var button = document.createElement('button'); button.innerHTML = "新增";
2019-07-08 21:18:58
原创 nvm - node版本管理
nvm 是node 的版本管理工具，可切換多個node 版本 在Mac 上，只需要使用 Homebrew 下載 nvm 即可。 brew install nvm 使用nvm 也很簡單 nvm list 查看當前所有的node 版本 nv
2019-07-02 20:58:30
原创 webpack 與 code splitting 2
前面一篇，我們自己手動進行了代碼分割。 我們在使用 webpack 的時候，一般都會使用 code splitting。因爲webpack 中有一些插件可以讓我們非常容易地進行 code splitting。 在 webpack4 中有一
2019-06-27 21:13:36
原创 HTTP CSP
Content Security Policy (CSP) https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP 它體現在： - 限制資源獲取 - 報告資源獲取越權 限制方
2019-06-23 20:39:28
原创 HTTP 數據協商
數據協商，即客戶端發送給服務端一個請求的時候，客戶端會申明希望拿到的數據的格式以及數據相關的一些限制，而服務端會根據這些請求中表示的想要的限制，來進行判斷要返回一個怎樣的數據。 分類 - 請求 Accept 通過 “Accept
2019-06-22 20:38:59
原创 HTTP Redirect
Redirect 是指，當我們通過URL 訪問一個資源的時候，我們可能會發現，這個資源已經不在這個URL 所指向的位置了。這個時候，服務器要告訴瀏覽器/客戶端，要請求的資源在什麼地方，然後瀏覽器/客戶端再去重新請求那個地方，這樣的話，就可
2019-06-22 20:38:59
原创 HTTP 長連接
HTTP 請求是在TCP連接上進行發送的。而TCP的連接分爲：長連接，短連接。 長連接：HTTP 請求發送的時候，要先去創建一個TCP連接，然後在這個TCP連接上，把HTTP 的請求發送並接受完。一次HTTP請求結束了，瀏覽器就會跟服務端
2019-06-20 20:56:45
原创 Cookie
cookie Cookie 是服務端返回數據的時候，通過 Set-Cookie 這個 header，設置到瀏覽器中，並保存在瀏覽器中的內容。 瀏覽器保存了這個Cookie 後，下次在同域的請求中，就會帶上這個Cookie。 Cookie
2019-06-17 21:16:57
原创 緩存頭 Cache-Control 的含義和使用
本篇我們來寫一下HTTP 中的緩存，即Cache-Control 。 Cache-Control 的可緩存性（指明哪些地方可以緩存返回的數據）： - public (HTTP 返回的時候在Heaher 中設置Cache-Control
2019-06-16 21:41:42