vue-cli2 構(gòu)建速度優(yōu)化的實(shí)現(xiàn)方法
更新時(shí)間：2019年01月08日 14:18:51 作者：lifefriend_007
這篇文章主要介紹了vue-cli2 構(gòu)建速度優(yōu)化的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
對(duì)于使用 vue-cli 腳手架創(chuàng)建的前端項(xiàng)目，編譯發(fā)布幾乎是必需操作，有的編譯只需要幾秒鐘，快如閃電，有的卻需要好幾分鐘，慢如蝸牛。如果是線上進(jìn)行熱修復(fù)，那更是分秒必爭(zhēng)，網(wǎng)頁(yè)響應(yīng)的速度直接影響了用戶體驗(yàn)，用戶不會(huì)那么有耐心長(zhǎng)時(shí)間等著，讓你慢慢編譯。
網(wǎng)上流傳 vue-cli 一些優(yōu)化配置，有些在新版本的 vue-cli 和 webpack3 已經(jīng)不再需要了，有些是針對(duì) webpack4 的。對(duì)于新版本的 vue-cli 和 webpack3，以下簡(jiǎn)單配置優(yōu)化后，即可大幅提升構(gòu)建速度。
- 按需引用及動(dòng)態(tài)路由
- 啟用 uglifyjs-webpack-plugin 緩存
- 關(guān)閉 source-map
- 利用 DllPlugin 和 DllReferencePlugin 提取公用庫(kù)
一、動(dòng)態(tài)路由
1、修改 src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
// webpackChunkName 打包后的文件名
const Menu = () => import(/* webpackChunkName: 'Menu' */ '@/pages/menu/index.vue')
export default new Router({
routes: [
{
path: '/',
name: 'Menu',
component: Menu
}
]
})
2、配置 .babelrc（可選）
{
...
"comments": true, // 輸出編譯信息
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
3、修改 build/webpack.prod.conf.js
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash].js'),
chunkFilename: utils.assetsPath('js/[name].js') // 使用webpackChunkName定義的文件名
},
二、啟用 uglifyjs-webpack-plugin 緩存
new UglifyJsPlugin({
parallel: true, // 并行
cache: true // 緩存
}),
三、關(guān)閉 source-map
修改 src/config/index.js 中 productionSourceMap 值
productionSourceMap:false
四、公用庫(kù)提取
1、安裝 clean-webpack-plugin add-asset-html-webpack-plugin
yarn add clean-webpack-plugin add-asset-html-webpack-plugin@2.1.0 --dev
2、build 目錄下創(chuàng)建 webpack.dll.conf.js
const webpack = require('webpack')
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const dllPath = path.resolve(__dirname, '../src/assets/dll') // dll文件存放的目錄
process.env.NODE_ENV = 'production' // NODE_ENV 設(shè)置為 production 減少依賴
module.exports = {
entry: { // 把 vue 相關(guān)模塊的放到一個(gè)單獨(dú)的動(dòng)態(tài)鏈接庫(kù)
vue: ['babel-polyfill', 'vue', 'vue-router', 'vuex', 'axios', 'element-ui']
},
output: {
filename: '[name]-[hash].dll.js', // 生成vue.dll.js
path: dllPath,
library: '_dll_[name]'
},
plugins: [
new CleanWebpackPlugin(['*.js'], { // 清除之前的dll文件
root: dllPath
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV) // 設(shè)置環(huán)境變量
}
}),
new webpack.DllPlugin({
name: '_dll_[name]', // manifest.json 描述動(dòng)態(tài)鏈接庫(kù)包含了哪些內(nèi)容
path: path.join(__dirname, './', '[name].dll.manifest.json')
}),
// 壓縮代碼
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
pure_funcs: ['console.log']
},
sourceMap: false
})
]
}
3、在 package.json 中新增 dll 構(gòu)建命令
"scripts": {
"dll": "webpack --config build/webpack.dll.conf.js" // dll打包命令
},
4、修改 build/webpack.prod.conf.js
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
plugins: [
// 引用 manifest.json
new webpack.DllReferencePlugin({
manifest: require('./vue.dll.manifest.json')
}),
// 將 dll 注入到 生成的 html 模板中
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, '../src/assets/dll/*.js'), // dll文件位置
publicPath: config.build.assetsPublicPath + utils.assetsPath('dll/'), // dll 引用路徑
outputPath: config.build.assetsPublicPath + utils.assetsPath('dll/'), // dll最終輸出的目錄
includeSourcemap: false
// hash: true,
}),
...
]
五、編譯
yarn run dll // 運(yùn)行一次生成 dll 文件即可，下次構(gòu)建時(shí)不必運(yùn)行 yarn run build
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
聊聊element-ui 側(cè)邊欄的router問(wèn)題
這篇文章主要介紹了關(guān)于element-ui 側(cè)邊欄的router問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue子組件如何獲取父組件的內(nèi)容(props屬性)
這篇文章主要介紹了vue子組件獲取父組件的內(nèi)容(props屬性)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3實(shí)現(xiàn)鼠標(biāo)右鍵顯示菜單,點(diǎn)擊其他地方消失問(wèn)題
這篇文章主要介紹了vue3實(shí)現(xiàn)鼠標(biāo)右鍵顯示菜單,點(diǎn)擊其他地方消失問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue如何使用文件流進(jìn)行下載(new Blob)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
開發(fā)中遇到bug是在正常不過(guò)了,而程序也基本都是bug堆里爬出來(lái)的,對(duì)于程序員來(lái)說(shuō)bug調(diào)試也是自己工作的重要組成部分,下面這篇文章主要給大家介紹了關(guān)于Vue環(huán)境搭建報(bào)錯(cuò)整理的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue中如何將日期轉(zhuǎn)換為指定的格式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue頁(yè)面切換項(xiàng)目實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫的方法
這篇文章主要介紹了vue頁(yè)面切換項(xiàng)目實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
詳解mpvue實(shí)現(xiàn)對(duì)蘋果X安全區(qū)域的適配
這篇文章主要介紹了詳解mpvue實(shí)現(xiàn)對(duì)蘋果X安全區(qū)域的適配，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了Vue作用域插槽實(shí)現(xiàn)方法及作用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
本文主要介紹了?vue全局引入scss,我們?cè)趯慥UE的時(shí)候,會(huì)使用scss，也會(huì)做一些通用樣式,方便使用,在寫好的通用樣式的時(shí)候,每次都要單文件導(dǎo)入,剛開始寫的時(shí)候,感覺(jué)還好,后面工程量大了后,就顯得麻煩,那么本文就全局導(dǎo)入scss樣式,下面來(lái)看詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11