vue-cli2 構(gòu)建速度優(yōu)化的實現(xiàn)方法
更新時間：2019年01月08日 14:18:51 作者：lifefriend_007
這篇文章主要介紹了vue-cli2 構(gòu)建速度優(yōu)化的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
對于使用 vue-cli 腳手架創(chuàng)建的前端項目，編譯發(fā)布幾乎是必需操作，有的編譯只需要幾秒鐘，快如閃電，有的卻需要好幾分鐘，慢如蝸牛。如果是線上進行熱修復(fù)，那更是分秒必爭，網(wǎng)頁響應(yīng)的速度直接影響了用戶體驗，用戶不會那么有耐心長時間等著，讓你慢慢編譯。
網(wǎng)上流傳 vue-cli 一些優(yōu)化配置，有些在新版本的 vue-cli 和 webpack3 已經(jīng)不再需要了，有些是針對 webpack4 的。對于新版本的 vue-cli 和 webpack3，以下簡單配置優(yōu)化后，即可大幅提升構(gòu)建速度。
- 按需引用及動態(tài)路由
- 啟用 uglifyjs-webpack-plugin 緩存
- 關(guān)閉 source-map
- 利用 DllPlugin 和 DllReferencePlugin 提取公用庫
一、動態(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
四、公用庫提取
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)模塊的放到一個單獨的動態(tài)鏈接庫
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 描述動態(tài)鏈接庫包含了哪些內(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 // 運行一次生成 dll 文件即可，下次構(gòu)建時不必運行 yarn run build
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了關(guān)于element-ui 側(cè)邊欄的router問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
vue子組件如何獲取父組件的內(nèi)容(props屬性)
這篇文章主要介紹了vue子組件獲取父組件的內(nèi)容(props屬性)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3實現(xiàn)鼠標右鍵顯示菜單,點擊其他地方消失問題
這篇文章主要介紹了vue3實現(xiàn)鼠標右鍵顯示菜單,點擊其他地方消失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了vue如何使用文件流進行下載(new Blob)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
開發(fā)中遇到bug是在正常不過了,而程序也基本都是bug堆里爬出來的,對于程序員來說bug調(diào)試也是自己工作的重要組成部分,下面這篇文章主要給大家介紹了關(guān)于Vue環(huán)境搭建報錯整理的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue中如何將日期轉(zhuǎn)換為指定的格式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue頁面切換項目實現(xiàn)轉(zhuǎn)場動畫的方法
這篇文章主要介紹了vue頁面切換項目實現(xiàn)轉(zhuǎn)場動畫的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
詳解mpvue實現(xiàn)對蘋果X安全區(qū)域的適配
這篇文章主要介紹了詳解mpvue實現(xiàn)對蘋果X安全區(qū)域的適配，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要介紹了Vue作用域插槽實現(xiàn)方法及作用詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
本文主要介紹了?vue全局引入scss,我們在寫VUE的時候,會使用scss，也會做一些通用樣式,方便使用,在寫好的通用樣式的時候,每次都要單文件導(dǎo)入,剛開始寫的時候,感覺還好,后面工程量大了后,就顯得麻煩,那么本文就全局導(dǎo)入scss樣式,下面來看詳細內(nèi)容,需要的朋友可以參考一下2021-11-11