cli組件分離js的簡單介紹

本文目錄一覽：

• 1、VueCLI3打包優化–抽離依賴包
• 2、vue cli app.js文件過大怎麼辦
• 3、vuecli搭建前端，nodejs怎麼搭建後端
• 4、手把手教你使用nodejs編寫cli(命令行)
• 5、關於Vue-cli引入外部js資源文件失敗的一點思路
• 6、使用vue-cli生成的vendor.js文件太大，有辦法減少體積嗎

VueCLI3打包優化–抽離依賴包

項目開發中，使用了很多依賴包，如 Vue 、路由管理 Vue-router 、狀態管理 Vuex 、UI組件庫( ElementUI 、 Vant )、圖表（ echarts ）等。打包構建，發現有一些包體積過大，會影響首頁加載速度。如下所示：

從上圖的分析包中，可以將以下插件抽離：

需要刪除的依賴包

VueCLI3自帶了 webpack analzer ,可通過如下命令即可生成分析包內容，在 dist/report.html

更多請查看：

減少打包體積、加快打包速度，常規的優化有以下兩種：

按需加載是通過只引用使用的組件來減少體積，這就會有一個問題：如果項目重度依賴第三方插件（如 ElementUI 、 vant ），那麼此方案將無法減少打包的體積。

這裡選擇CDN的方式， 配置流程 ：

可根據環境變量，僅在線上採取使用CDN,開發環境直接使用npm依賴包即可。

進行包分離以後，打包結果：

vue.config.js 的pages為：

修改如下的地方：

外部擴展(externals)

使用webpack的externals來指定echarts無法減少包的大小

vue-cli利用webpack-bundle-analyzer分析構建產物

vue cli app.js文件過大怎麼辦

這裡的組件化開發是使用什麼?? vue-loader么… 如果是vue-loader可以通過 require來引入就可以 比如Js文件寫到assets/js中 在main.js中可以 require(‘./src/assets/xxx.js’) 如果只是單頁面html,可以直接引入就行了

vuecli搭建前端，nodejs怎麼搭建後端

1、安裝node，vue運行需要基於npm一定的版本，所以首先升級npm到最新的版本，而在安裝的過程中個人比較喜歡淘寶的鏡像，所以先安裝cnpm（因為速度和穩定性都比較好）

2、在目標文件夾下打開終端

3、執行cnpm install vue-cli -g 全局安裝

運行vue查看安裝是否成功

4、運行vue init webpack(註：模板名稱) sell2(註：項目名稱)

5、進入項目文件夾下執行 cnpm install 來安裝下載到模板中的package.json中的依賴，安裝完成後會在項目文件夾下自動生成node-module文件來存放安裝的依賴文件

6、由於依賴項非常的多編輯器在檢索module文件時會非常的耗內存，所以在用webstorm編輯器啟動項目的時候我們往往會在node-module文件夾右鍵去阻止檢索該文件

註：webstorm一打開就卡死了，沒辦法操作文件夾這種情況的解決方法為，首先在文件夾形式下打開刪除node-modules文件夾，然後進行阻止檢索的方法，然後在重新cnpm install就好*（這種方法需要安裝完依賴項先運行一次然後刪除node_modules子文件，webstorm打開項目，禁止檢索node_ module文件夾，然後在刪除該文件夾，重新安裝即可）

7、運行項目執行 npm run dev (註：此時不能用cnpm來運行，必須是npm)

8、將需要的資源放進項目

9、我們需要用到路由功能 所以需要安裝vue-router

安裝方法：vnpm install vuve-router –save

10、在build/devs-erver.js下編寫自定義變量和路由功能

這樣在運行項目下就可以得到自己想要的json數據，

這樣路由就配置成功，並且得到了自己想要的數據

11、在寫代碼之前現在html文件下引入初始化樣式（保持樣式的統一和美觀）

12、調用組件的方式

手把手教你使用nodejs編寫cli(命令行)

前端日常開發中，會遇見各種各樣的cli，比如一行命令幫你打包的webpack，一行命令幫你生成vue項目模板的vue-cli，還有創建react項目的create-react-app等等等等。這些工具極大地方便了我們的日常工作，讓計算機自己去干繁瑣的工作，而我們，就可以節省出大量的時間用於學習、交流、開發、 逛steam 。

但是有時候一些十分特別的需求，我們是找不到適合的cli工具去做的。比如說，你的項目十分龐大，你給項目添加一個新的路由，要經過 創建目錄 – 創建.vue文件 – 更新vue-router的路由列表 這一趟流程，就算快捷鍵創建目錄文件用得再熟悉，也比不過你一行命令來得快，特別是路由目錄嵌套深，.vue文件初始化模板複雜的時候。

所以呢，何不為自己項目寫一個cli？就專門做這些繁瑣的活？

nodejs的cli，本質就是跑node腳本嘛，基本上每位前端er都會：

然後命令行調用

可以做得更逼真一點，我們在package.json裡面的scripts字段上添加一下腳本名：

然後命令行調用：

但是，看到這裡你肯定會說，人家webpack還有vue-cli都是“有名字”的！什麼 vue-cli init app 、 webpack -p 的，多漂亮，看看這個命令行， node index.js ，還 npm run hello ，誰不會啊，丑不拉幾的，怕又不是來水文章的哦？差評！！

別急啊各位大人，接下來就說說，如何給這個node腳本起個名字。

姑且，先把這個cli的名字命名為 hello-cli ，就是我們能夠在命令行裡面，輸入 hello-cli ，然後它就打印一句 hello world ，沒有 node 也沒有 npm ，就是：

這樣，你的第一個cli腳本就成功安裝了，可以在命令行裡面，直接敲你的cli名字，看看結果輸出吧。

另外，如果你僅希望你的cli腳本僅在項目里執行，則需要在你項目裡面新建一個目錄，重複上述的操作，只是在第三步的時候，不要llink到全局裡面去，而是使用 npm i -D file:你的腳本cli目錄路徑 ，把它當成項目的依賴安裝到node_modules裡面去，如果安裝成功，那麼在項目的package.json你會看到多了一條依賴，這條依賴的值不是版本號，而是你腳本的路徑。然後在node_modules裡面會有一個.bin目錄，裡面就存放着你的可執行文件。

當然，這樣安裝的cli腳本，必須在項目的package.json的scripts字段上聲明腳本命令，然後通過 npm run 的方式執行。

哦？這樣子使用的話不就回到最最最開始的時候那種原始的 npm run hello 一樣么。

是的，但是有質的區別。使用 node index.js 這種方式調用的話固然簡單靈活，但是嚴重依賴腳本路徑，一旦目錄結構發生變動，寫在scripts的命令就要更改一次；但是使用npm安裝之後，本地的cli腳本就被拉到node_modules裡面，目錄結構變動對其影響不大。其次是不利於分享與發布，如果你想把你的cli腳本發布出去，那麼有一個好聽響亮的名字，比起在說明文檔裡面告訴使用者如何找到你的腳本路徑再用node執行它，簡直好上那麼一萬倍不是么？

這裡也給我們提供了一個cli開發流程思路：

名字有了，輸出也有了，看看我們跟那些大名鼎鼎的cli工具，在形式上還差點啥？對了，人家可以支持不同參數選項的，還可以根據輸入的不同，產生不同的結果。

這樣吧，我們給這個cli加一個功能，既然叫 hello-cli ，那不能只會 hello world 吧，必須要見誰就說 hello 才行：

雖然這個功能很簡單，但是至少也是實現了“根據輸入的不同，產生不同結果”的效果。

命令行上的參數，可以通過 process 這個變量獲取， process 是一個全局對象而不是一個包，不需要通過 require 引入。通過 process 這個對象我們可以拿到當前腳本執行環境等一系列信息，其中就包括命令行的輸入情況，這個信息，保存在 process.argv 這個屬性里。我們可以打印一下：

打印結果：

可以看出，argv是個數組，前兩位是固定的，分別是node程序的路徑和腳本存放的位置，從第三位開始才是額外輸入的內容。那麼實現上面的功能就很簡單了，只要讀取argv數組的第三位，然後輸出出來就可以了。

npm社區中也有一些優秀的命令行參數解析包，比如 yargs ,tj的 commander.js 等等

如果你想使用比較複雜的參數或者命令，建議還是用第三方包比較好，手寫解析太耗精力了。

現在，你可以自由自在的寫你自己的cli腳本了。

如果你希望寫一個項目打完包自動推上git的cli，或者自動從git倉庫裡面拉取項目啟動模板，那麼，你需要通過node的 child_process 模塊開啟子進程，在子進程內調用git命令：

不僅是git命令，包括系統命令、其他cli命令都可以在這裡執行。特別是系統命令，使用系統命令對文件目錄進行操作，效率比fs高到不知道哪裡去了。

社區上也有一些不錯的包，比如阮一峰老師推薦的 shelljs

如果你不那麼希望你的cli用起來那麼“硬核”，希望更人性化一點，比如提供一些友好的輸入、提示啊，給你的輸出加點顏色區分重點啊，寫個簡單的進度條啊等等，那麼你就需要美化一下你的輸出了。

除了顏色這部分，不使用第三方包實現起來非常繁瑣複雜，其他的功能，都可以試試自己寫。

顏色部分使用了第三方包 colors ，這裡就不演示了。

其他都是由nodejs自帶的 readline 模塊實現的。

繪製的思路跟canvas繪製動畫一樣，只不過canvas是清除畫布，而命令行這裡是通過 readline.clearScreenDown 清除輸出。

這樣，一個簡易的，人性化的，帶點點進度條動畫的命令行cli工具就寫好了，你也可以發揮你的想象力，去寫一些更有趣的效果出來。

畢竟我們前端，有瀏覽器我們可以寫動畫，沒了瀏覽器我們一樣可以寫動畫。

關於Vue-cli引入外部js資源文件失敗的一點思路

首先申明我是window系統下Vue-cli 4.5.3版本，腳手架整體基於vue2內核。

1.正常js文件如果有使用export向外暴露對象，將js放在src/assets都是可以通過import直接引入。但有有些情況下我們需要導入第三方的js文件，例如近期我在做的阿里雲點播視頻上傳SDK，包括最近在學習的ThreeJs，如果單單只是在public中index.html通過script src=””/script引入，是不夠的還需要在具體vue頁面引入：

這也是我嘗試兩天才成功，走了些彎路，希望幫助到有同樣問題的打工人，共勉!

使用vue-cli生成的vendor.js文件太大，有辦法減少體積嗎

首先，在寫 Vue 的時候，應該採用懶加載模式，之後生成的包，就會被打入到不同分組的 js，運行時按需加載，詳情見：Vue-路由懶加載；這個意義重大！

其次，可利用，webpack.DllReferencePlugin webpack.DllReferencePlugin 將常用不怎麼變更的文件，打入一個統一的文件，外鏈使用。這個主要作用也可用來縮小包構建的時間；這個網上教程蠻多，就不贅述。也可參見這個項目 jade-blog 來配置；這一步即是你通過配置將部分庫抽離出來，打包成另外的文件。

再次，可以利用 webpack-bundle-analyzer 可以分析打包後生成的文件結構，十分牛掰（最新 Vue-cli 帶有此配置）；在 package.json 中配置如下命令 npm run analyz，運行即可查看之：

“analyz”: “NODE_ENV=production npm_config_report=true npm run build”