摘要:由于新建項目發(fā)版打包時間大概需要分鐘,發(fā)版時嚴重拖慢下班時間,所以特意查看了相關(guān)文檔來優(yōu)化打包速度,爭取早點下班,。分析打包文件要優(yōu)化,先分析。
由于新建項目發(fā)版打包時間大概需要30分鐘,發(fā)版時嚴重拖慢下班時間,所以特意查看了相關(guān)文檔來優(yōu)化打包速度,爭取早點下班,^_^。
分析打包文件要優(yōu)化,先分析。我們先要知道到底是哪里拖慢我們的打包速度呢?
打包后生成文件分析可以利用webpack-bundle-analyzer插件來分析我們打包后生成的文件
安裝
npm i webpack-bundle-analyzer -D
使用
修改webpack.prod.conf.js文件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin // 構(gòu)建完成后,瀏覽器會自動打開localhost:8080 webpackConfig.plugins.push( new BundleAnalyzerPlugin({ analyzerPort: 8080, generateStatsFile: false }) )
通過圖片可以看到打包后文件的具體信息
打包進度條顯示,可以查看到打包進度百分比simple-progress-webpack-plugin可以顯示打包百分比
安裝
npm i simple-progress-webpack-plugin -D
使用
修改webpack.prod.conf.js文件
const SimpleProgressWebpackPlugin = require( "simple-progress-webpack-plugin" ) ... plugins: [ new SimpleProgressWebpackPlugin() ] ...
效果如下:
資源與依賴包的控制通過上面進度可以看到,打包過程中,卡頓在壓縮的地方過長,當項目越來越臃腫的時候,我們要需要對項目靜態(tài)資源以及依賴包進行整理,
圖片過大的可以壓縮,這里推薦一個還不錯的壓縮鏈接
項目中沒有使用的依賴可以刪除,可以按需引用的依賴,按需引用
項目里面使用ElementUI和Echarts都是全部引用掛在Vue.prototype上,現(xiàn)都改為按需引用。
減少文件搜索范圍設(shè)置resolve.alias字段,避免打包時如果使用相對路徑訪問或著import文件時會層層去查找解析文件
resolve: { alias: { "@": resolve("src") } }
合理配置extensions擴展名
resolve.extensions能夠自動解析確定的擴展,但是如果extensions擴展名過多,會導致解析過程過多,所以我們要合理配置擴展名,不要過多配置擴展名,項目引用多的文件,擴展名放在前面,我司項目中多的是vue,js文件,可以只引用這兩種。
resolve: { extensions: [".vue", ".js"] }
loader預(yù)處理文件增加include匹配特定條件
預(yù)處理各種文件時指定匹配目錄后,webpack解析文件時就不會循環(huán)查找其他目錄,加快解析速度。
happypack多線程執(zhí)行webpack執(zhí)行預(yù)處理文件時單線程的,我們可以使用happypack來多線程處理文件。
安裝
npm i happypack -D
使用
修改webpack.base.js文件
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); module: { rules: [ { test: /.js$/, loader: "happypack/loader?id=babel", // 原始loader替換成`happypack/loader` include: [resolve("src")] } ] }, plugins: [ new HappyPack({ // id標識 需要處理的loader id: "babel", // loader配置和原始配置一樣 loaders: [ { loader: "babel-loader", options: { presets: ["es2015"], cacheDirectory: true } } ], threadPool: happyThreadPool }) ]babel-plugin-dynamic-import-node異步加載
babel-plugin-dynamic-import-node插件是使import() 替換成 require 編譯
安裝
npm i babel-plugin-dynamic-import-node -D
使用
修改.babelrc 文件
"env": { "development": { "plugins": ["dynamic-import-node"] }, "production": { "plugins": ["dynamic-import-node"] } }
注意:使用插件build后沒有chunk files文件。
DllPlugin分包通過DllPlugin插件分離出第三方包
新建webpack.dll.conf.js
const path = require("path"); const webpack = require("webpack"); const CleanWebpackPlugin = require("clean-webpack-plugin"); module.exports = { entry: { vendor: [ "vue", "vue-router", "vuex", "axios", "element-ui", "echarts" ] }, output: { filename: "[name]_dll_[hash:6].js", // 產(chǎn)生的文件名 path: path.resolve(__dirname, "../static/dll"), library: "[name]_dll_[hash:6]" }, plugins: [ new CleanWebpackPlugin({ root: path.resolve(__dirname, "../static/dll"), dry: false // 啟用刪除文件 }), new webpack.DllPlugin({ name: "[name]_dll_[hash:6]", path: path.resolve(__dirname, "../static/dll", "[name].dll.manifest.json") }) ] };
修改webpack.prod.conf.js
使用add-asset-html-webpack-plugin動態(tài)添加dll.js到html。
需要注意
add-asset-html-webpack-plugin要在HtmlWebpackPlugin后引入;
html-webpack-plugin依賴包版本4.0.0-alpha會出個問題,添加上去的路徑會變成undefined需要是3.2.0版本
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin"); ... plugins: [ // 插入dll json new webpack.DllReferencePlugin({ context: path.join(__dirname), manifest: require("../static/dll/vendor.dll.manifest.json") }), new HtmlWebpackPlugin(), // 插入 dll js new AddAssetHtmlPlugin([{ publicPath: config.build.assetsPublicPath + "static/dll/", // 注入到html中的路徑 outputPath: "static/dll/", // 輸出文件目錄 filepath: resolve("static/dll/*.js"), // 文件路徑 includeSourcemap: false, typeOfAsset: "js" }]) ]總結(jié)
項目經(jīng)過以上優(yōu)化,打包從30分鐘,到2分鐘不到,整體還有優(yōu)化空間,可以使用其他cdn等優(yōu)化方式。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/104470.html
摘要:項目開發(fā)完成,接下來是上線,關(guān)于項目的部署,我司前端是部署在服務(wù)器上,關(guān)于的相關(guān)文檔,請自行查閱本文只記錄部署時碰到的一些問題。其他總結(jié)文章常規(guī)打包優(yōu)化方案組件通信處理方案后臺管理項目總結(jié) 項目開發(fā)完成,接下來是上線,關(guān)于vue項目的部署,我司前端是部署在nginx服務(wù)器上,關(guān)于nginx的相關(guān)文檔,請自行查閱;本文只記錄部署時碰到的一些問題。 打包 vue項目打包后,是生成一系列的靜...
摘要:,組件按需加載這也是可以優(yōu)化的點。如果大家還有好的優(yōu)化方案,歡迎大家留言交流 在日常的Vue項目開發(fā)中,隨著業(yè)務(wù)的日漸復(fù)雜,代碼量的日益增加,隨之帶來的問題就是打包后的vendor.js體積過大,導致加載時空白頁時間過長,給用戶的體驗太差。為此我們需要減少vendor.js的體積,從本質(zhì)上來解決這種問題。 這里大概例舉幾個在項目中實際用到過的方法,優(yōu)化后的js大概縮小了50%左右,效果...
摘要:很多優(yōu)化點都是根據(jù)實際情況入手,上面這幾個,都是我在做項目時,感覺不合適而進行優(yōu)化的,后面會持續(xù)補充下去 主要說的是,我在項目中,自己遇到的一些小問題和解決方案 圖片 base64 問題 // 有一個 test 的組件 .icon { background: url(../assets/test.png); } // 然后有三個頁面,引入了 test 組...
摘要:主要是整理一些自己還記得的面試題。標注重點的是頻繁出現(xiàn)的,也確實很重要的知識點。總之要深度理解舉一反三邏輯清晰表達流暢。以上,僅供參考。 主要是整理一些自己還記得的面試題。很多題目會根據(jù)項目內(nèi)容提問,現(xiàn)在只記得一些比較常規(guī)的問題,后面想起來會做一些補充。標注重點的是頻繁出現(xiàn)的,也確實很重要的知識點。 css 盒子模型:ie與其他瀏覽器的區(qū)別,如何改變盒子模型 圖形:實現(xiàn)扇形/圓環(huán)/梯...
摘要:主要是整理一些自己還記得的面試題。標注重點的是頻繁出現(xiàn)的,也確實很重要的知識點。總之要深度理解舉一反三邏輯清晰表達流暢。以上,僅供參考。 主要是整理一些自己還記得的面試題。很多題目會根據(jù)項目內(nèi)容提問,現(xiàn)在只記得一些比較常規(guī)的問題,后面想起來會做一些補充。標注重點的是頻繁出現(xiàn)的,也確實很重要的知識點。 css 盒子模型:ie與其他瀏覽器的區(qū)別,如何改變盒子模型 圖形:實現(xiàn)扇形/圓環(huán)/梯...
閱讀 1202·2021-11-23 09:51
閱讀 1980·2021-10-08 10:05
閱讀 2339·2019-08-30 15:56
閱讀 1900·2019-08-30 15:55
閱讀 2640·2019-08-30 15:55
閱讀 2487·2019-08-30 13:53
閱讀 3498·2019-08-30 12:52
閱讀 1250·2019-08-29 10:57