vue腳手架打包編譯運行都很卡

A. vue項目編譯不支持es11

Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但對於 IE9+，Vue 底層是支持。

由於開發過程中，我們經常會使用一些第三方插件或組件，對於這些組件，有時我們需要做一些處理。下述主要闡述如何使用 vue-cli3 腳手架搭建的工程支持 IE11。

現象
IE11 打開 Vue 工程（Vue CLI）構建而來出現空白頁，控制台告警、報錯。

如：

DOM7011: 此頁上的代碼禁用了反向和正向緩存
HTML1300：進行了導航
app.js 各種語法錯誤

browserslist
項目中 package.json 文件里的 browserslist 欄位 (或一個單獨的 .browserslistrc 文件)，指定了項目的目標瀏覽器的范圍。這個值會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴。

@babel/preset-env：將你使用最新 JavaScript 語法，靈活的轉化為目標瀏覽器所支持的 polyfill。
Autoprefixer：PostCSS 插件，為瀏覽器增加前綴。
.browserslistrc

> 1%
last 2 versions
not ie < 11
Polyfill
默認的 Vue CLI 項目會使用 @vue/babel-preset-app，它通過 @babel/preset-env 和 browserslist 配置來決定項目需要的 polyfill。

默認情況下，它會把 useBuiltIns: 'usage' 傳遞給 @babel/preset-env，這樣它會根據源代碼中出現的語言特性自動檢測需要的 polyfill。這確保了最終包里 polyfill 數量的最小化。然而，這也意味著如果其中一個依賴需要特殊的 polyfill，默認情況下 Babel 無法將其檢測出來。

B. vue編譯打包速度優化

1、首先在config文件夾下配置webpack.dll.config.js(內容如下)，要打包的模塊的數組可以將一些較大的依賴放進vendor中

2、在package.json的scripts加上

3、運行npm run dll就可以生成vendor-manifest.json和vendor.dll.js

4、然後在index.html中引入vendor.dll.js

然後就可以正常的進行編譯打包，會發現將更多的依賴放到vendor，打包速度越快

優化前

優化後

大概平均可以節省三分之一的時間。參考 webpack中文網

C. Vue/React 項目運行或者打包出現內存溢出解決方案

因為項目過大運行打包項目的時候報錯FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed

failed - JavaScript heap out of memory JavaScript堆內存不足，這里說的 JavaScript 其實就是 Node，我們都知道 Node 是基於V8引擎，在一般的後端開發語言中，在基本的內存使用上沒有什麼限制，在 Node 中通過 JavaScript 使用內存時只能使用部分內存（64位系統下約為1.4 GB，32位系統下約為0.7 GB），這就是我們編譯項目時為什麼會出現內存泄露了，因為前端項目如果非常的龐大，webpack 編譯時就會佔用很多的系統資源，如果超出了V8對 Node 默認的內存限制大小就會出現剛剛我截圖的那個錯誤了，那怎麼解決呢？V8依然提供了選項讓我們使用更多的內存。Node 在啟動時可以傳遞 --max-old-space-size 或 --max-new-space-size 來調整內存大小的使用限制。

React

一般情況如果用過第一種方案成功可以不使用第二種，我是遇到第一種配置內存還不起作用的時候用第二種方案生效。

全局安裝increase-memory-limit
命令行cmd窗口運行：npm install -g increase-memory-limit，
進入項目文件夾，運行：increase-memory-limit（只需要執行一次即可）