webpack打包vue專案效能優化

2021-09-26 06:20:42 字數 1531 閱讀 6457

專案打包上線設定productionsourcemap為false減小.map檔案所佔dist檔案的體積;

開啟gzip對dist檔案進一步壓縮(ps:需後端配合開啟gzip方可使用);

使用cdn減小打包後vendor.js的體積,從而縮短首屏載入時間(ps:第3步如果注釋掉出現錯誤可以不進行注釋);

按需引用元件(iview為例);

webpack-parallel-uglify-plugin替換uglifyjs-webpack-plugin提公升打包速度(ps:uglifyjs-webpack-plugin單程序,webpack-parallel-uglify-plugin多程序)

// 引入 paralleluglifyplugin 外掛程式

const paralleluglifyplugin = require('webpack-parallel-uglify-plugin');

// 使用 paralleluglifyplugin 並行壓縮輸出的 js **

new paralleluglifyplugin(,

compress:

},test: /.js$/g, //使用正則去匹配哪些檔案需要被 paralleluglifyplugin 壓縮,預設是 /.js$/g

include: , //使用正則去命中需要被 paralleluglifyplugin 壓縮的檔案,預設為

exclude: , //使用正則去命中不需要被 paralleluglifyplugin 壓縮的檔案,預設為

cachedir: '', //快取壓縮後的結果,預設不會快取,想開啟快取請設定乙個目錄路徑

workercount: '', //開啟幾個子程序去併發的執行壓縮。預設是當前執行電腦的 cpu 核數減去1

sourcemap: false //是否輸出 source map,這會導致壓縮過程變慢

})

vue專案webpack打包專案輸出可修改配置項

前不久專案打包交付測試進行測試時,需要打包到不同的測試伺服器分別指向其對應api位址,如果打包一次修改一次api位址,那豈不是很麻煩?今天我們就來解決這個問題 核心思路 打包輸出乙份配置,中獲取配置 方法一 1.在static webpack不會編譯 下建立serve.config.js descr...

webpack搭建vue專案流程以及打包發布流程

目錄 1.1 命令列初始化專案 1.2 分析專案目錄 1.3 執行專案 1.4 多環境配置打包發布 最近公升級到vue cli3,發現vue cli2搭建專案命令不能用了,兩者搭建開發環境專案內容也發生了變化。vue cli2搭建專案環境的命令 vue init webpack vue2 webpa...

Vue工程webpack打包

npm install webpack g npm install webpack cli g webpack v webpack cli v 新建hello.js暴露方法供其他js引用,可防止原生 script script 標籤引入多個js方法重名的問題。暴露乙個方法 exports.sayhi...