1. VueCLI3打包優化--抽離(lí)依賴包
2. 怎麽提速優化vue-cli的代碼
3. vuecli4啓動加載所有模塊

一(yī)、VueCLI3打包優化--抽離(lí)依賴包

項目開(kāi)發中(zhōng)，使用了很多依賴包，如 vue 、路由管理 vue-router 、狀态管理 vuex 、ui組件庫( elementui 、 vant )、圖表（ echarts ）等。打包構建，發現有一(yī)些包體(tǐ)積過大(dà)，會影響首頁加載速度。如下(xià)所示：

從上圖的分(fēn)析包中(zhōng)，可以将以下(xià)插件抽離(lí)：

需要删除的依賴包

vuecli3自帶了 webpack analzer ,可通過如下(xià)命令即可生(shēng)成分(fēn)析包内容，在 dist/report.html

更多請查看：

https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve

減少打包體(tǐ)積、加快打包速度，常規的優化有以下(xià)兩種：

按需加載是通過隻引用使用的組件來減少體(tǐ)積，這就會有一(yī)個問題：如果項目重度依賴第三方插件（如 elementui 、 vant ），那麽此方案将無法減少打包的體(tǐ)積。

這裏選擇cdn的方式， 配置流程 ：

可根據環境變量，僅在線上采取使用cdn,開(kāi)發環境直接使用npm依賴包即可。

進行包分(fēn)離(lí)以後，打包結果：

vue.config.js 的pages爲：

修改如下(xià)的地方：

外(wài)部擴展(externals)

使用webpack的externals來指定echarts無法減少包的大(dà)小(xiǎo)

vue-cli利用webpack-bundle-analyzer分(fēn)析構建産物(wù)

二、怎麽提速優化vue-cli的代碼

這次給大(dà)家帶來怎麽提速優化vue-cli的代碼，提速優化vue-cli代碼的注意事項有哪些，下(xià)面就是實戰案例，一(yī)起來看一(yī)下(xià)。

前言

伴随着vue的全球化，已經各種vue的組件框架越來越完善，從早期的element-ui到vux，iview等越來越多高質量的項目，使用vue進行前端構建已然是一(yī)件工(gōng)程化，模塊化，敏捷化的事情

在這其中(zhōng)，相信很多人都會選擇官方的vue-cli初始化工(gōng)程模闆，然後通過引入第三方組件框架和工(gōng)具的方式進行開(kāi)發構建，我(wǒ)個人也十分(fēn)推崇這種做法。但是vue-cli初始化的項目模闆畢竟是面向所有開(kāi)發者的，在兼容性方面會有一(yī)定妥協。相信很多人都已經搜索過各類的webpack構建優化文章，但是很多不是版本太老就是不嚴謹

本文希望能在耗時優化與構建性能提升之間做一(yī)個平衡，即花最少的時間，對官方模闆做最少的修改下(xià)，賺取最大(dà)的構建性能提升

思路

早期版本的vue-cli和webpack2時代，網上流傳以下(xià)優化配置，但其實新版本的vue-cli和webpack3已經不需要

使用paralleluglifyplugin替換uglifyplugin（新版本的uglifyplugin已經支持且默認開(kāi)啓了多線程并行構建，所以此步驟沒有必要）

啓用webpack3的scope hoisting（vue-cli新版本已經配置webapck3，且已經默認開(kāi)啓此配置）善用alias（新版本vue-cli已經進行此項工(gōng)作）配置commonschunkplugin提取公用代碼（新版本vue-cli已經進行此項工(gōng)作） 對于新版本的vue-cli和webpack3，以下(xià)簡單配置優化後可提升最少2倍的構建速度

按需引用

啓用happypack多核構建項目修改source-map配置啓用dllplugin和dllreferenceplugin預編譯庫文件 實踐

1、按需引用

1.1幾乎所有的第三方組件框架都會提供組件的 按需引用 方式，以iview爲例，通過借助插件babel-plugin-import 可以實現按需加載組件，減少文件體(tǐ)積，隻需要修改 .babelrc 文件

npm install babel-plugin-import --save-dev// .babelrc{ "plugins": [["import", { "libraryname": "iview", "librarydirectory": "src/components" }]]} 1.2然後這樣按需引入組件，就可以減小(xiǎo)體(tǐ)積了

import { button } from 'iview'vue.component('table', table) 2、啓用happypack多核構建項目

安裝happypack後，修改 /build/webpack.base.conf.js 文件即可

npm install happypack --save-dev// /build/webpack.base.conf.jsconst happypack = require('happypack')const os = require('os')const happythreadpool = happypack.threadpool({ size: os.cpus().length })// 增加happypack插件plugins: [ new happypack({ id: 'happy-babel-js', loaders: ['babel-loader?cachedirectory=true'], threadpool: happythreadpool, }) ]// 修改引入loader{ test: /\.js$/, // loader: 'babel-loader', loader: 'happypack/loader?id=happy-babel-js', // 增加新的happypack構建loader include: [resolve('src'), resolve('test')]} 3、修改source-map配置

3.1首先修改 /config/index.js 文件

// /config/index.jsdev環境：devtool: 'eval'（最快速度）prod環境：productionsourcemap: false（關閉source-map） 3.2然後修改 /src/main.js 文件，關閉生(shēng)産環境的調試信息

// /src/main.jsconst isdebug_mode = process.env.node_env !== 'production'vue.config.debug = isdebug_modevue.config.devtools = isdebug_modevue.config.productiontip = isdebug_mode 4、啓用dllplugin和dllreferenceplugin預編譯庫文件

這是最複雜(zá)也是提升效果最明顯的一(yī)步，原理是将第三方庫文件單獨編譯打包一(yī)次，以後的構建都不需要再編譯打包第三方庫

4.1 增加 build/webpack.dll.config.js 文件，并在其中(zhōng)配置需要單獨dll化的模塊

const path = require("path")const webpack = require("webpack")module.exports = { // 你想要打包的模塊的數組 entry: { vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview'] }, output: { path: path.join(dirname, '../static/js'), // 打包後文件輸出的位置 filename: '[name].dll.js', library: '[name]_library' }, plugins: [ new webpack.dllplugin({ path: path.join(dirname, '.', '[name]-manifest.json'), name: '[name]_library', context: dirname }), // 壓縮打包的文件 new webpack.optimize.uglifyjsplugin({ compress: { warnings: false } }) ]} 4.2 在 build/webpack.dev.conf.js 和 build/webpack.prod.conf.js 增加如下(xià)插件

new webpack.dllreferenceplugin({ context: dirname, manifest: require('./vendor-manifest.json')}) 4.3 在 /package.json 增加命令

"dll": "webpack --config ./build/webpack.dll.config.js" 4.4 在 /index.html 增加dll化js引入（必須首先引入）

<script src="/static/js/vendor.dll.js"></script> 4.5 執行構建

npm run dll（這一(yī)步會生(shēng)成build/vendor-manifest.json和static/js/vendor.dll.js）npm run dev 或 npm run build 後記

以上四個大(dà)步驟完成後，我(wǒ)們就完成了對vue-cli模闆工(gōng)程構建優化提升，雖然看起來依然算不上簡單，但是這已經是最最最簡單的優化了，還有更多奇技淫巧沒有展開(kāi)，因爲我(wǒ)覺得過多的優化配置意義不大(dà)，反而會給項目工(gōng)程帶來太多冗餘和複雜(zá)化

以上的配置實際測試的構建效果是從原先的13秒減少到了6秒左右，熱部署更是毫秒級的

最重要的是，最簡單化的配置，在未來vue-cli和webpack升級新版本後，也可以很容易的重新配置進去(qù)使用，熟練配置一(yī)次後，重新再還原配置隻需要 5分(fēn)鍾左右 想想花5分(fēn)鍾修改一(yī)下(xià)配置，就能換來每次構建2倍以上速度的提升，是不是會有點小(xiǎo)激動呢：）

這裏再多說些後話(huà)吧，其實webpack2至webpack3的升級，個人覺得蠻失望的，因爲它還是沒有從根本上解決其配置過于複雜(zá)的問題，作爲目标是占領全世界所有web項目構建的産品，它應該更多地從易用性/人性化的角度去(qù)考慮

每一(yī)次看着webpack的工(gōng)程裏面的各種.babelrc，.postcssrc.js...還有各種的.conf文件，甚至還有各種的main，index，app文件，就忍不住想吐槽，究竟爲什麽前端的構建會發展成這樣，一(yī)個好好的項目工(gōng)程裏，十幾種配置文件，真的有必要嗎(ma)？我(wǒ)原本以爲webpack3會将這一(yī)切變得簡單，然而它并沒有，不過既然暫時沒有辦法去(qù)改變，那我(wǒ)們能做的就是，盡可能理解其中(zhōng)原理，盡自己最大(dà)的可能去(qù)簡化/優化

相信看了本文案例你已經掌握了方法，更多精彩請關注gxl網其它相關文章！

推薦閱讀：

html+js實現滾動數字的時鍾

vuerouter的導航守衛應該怎麽使用

vue+element實現表格分(fēn)頁的步奏詳解

三、vuecli4啓動加載所有模塊

熱門頻(pín)道

首頁

博客

研修院

vip

app

問答

下(xià)載

社區

推薦頻(pín)道

活動

招聘

專題

打開(kāi)csdn app

copyright © 1999-2020, csdn.net, all rights reserved

打開(kāi)app

vuecli4 啓動_vuecli4 vant rem 移動端框架方案 原創

2021-02-05 00:13:11

郝景芳

碼齡5年

關注

更新

√ 2020-08-23 新增vw适配

√ 2020-04-21 github 優化文檔，優化項目

√ 2020-02-05 升級vue-cli4，添加eslint+pettier，添加vant 組件全局按需引入

描述

基于vue-cli4.0+ webpack 4 + vant ui + sass+ rem适配方案+axios封裝，構建手機端模闆腳手架

node 版本要求

vue cli 需要 node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一(yī)台電(diàn)腦中(zhōng)管理多個 node 版本。

本示例 node.js 12.14.1

啓動項目git clone https://github.com/sunniejs/vue-h5-template.git

cd vue-h5-template

npm install

npm run serve複制代碼

目錄√ vue-cli4

√ 配置多環境變量

√ rem 适配方案

√ vm 适配方案

√ vantui 組件按需加載

√ sass 全局樣式

√ vuex 狀态管理

√ vue-router

√ axios 封裝及接口管理

√ webpack 4 vue.config.js 基礎配置

√ 配置 alias 别名

√ 配置 proxy 跨域

√ 配置 打包分(fēn)析

√ 配置 externals 引入 cdn 資(zī)源

√ 去(qù)掉 console.log

√ splitchunks 單獨打包第三方模塊

√ 添加 ie 兼容

√ eslint+pettier 統一(yī)開(kāi)發規範

配置多環境變量

package.json 裏的 scripts 配置 serve stage build，通過 --m