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)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
對(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)文章
本文主要還是針對(duì) Vue.js 2.x 版本，畢竟接下來一段時(shí)間，Vue.js 2.x 還是我們工作中的主流版本，對(duì)vue.js性能優(yōu)化技巧相關(guān)知識(shí)感興趣的朋友一起看看吧2021-09-09
.sync修飾符算是Vue的所有修飾符中較難理解的一個(gè)，本篇文章就帶你走近.sync的世界，深入理解后會(huì)發(fā)現(xiàn)，其實(shí)也就那么回事。修飾符和指令息息相關(guān)，下面從指令 ->修飾符->.sync修飾符由淺入深地來講解 .sync的含義及用法。2021-05-05
Ant Design Vue table中列超長(zhǎng)顯示...并加提示語(yǔ)的實(shí)例
這篇文章主要介紹了Ant Design Vue table中列超長(zhǎng)顯示...并加提示語(yǔ)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
在使用token進(jìn)行登錄的過程中,如果token過期了,需要重新輸入用戶名和密碼登錄,這種體驗(yàn)肯定是不好的,下面這篇文章主要給大家介紹了關(guān)于Vue?Token過期問題的2種解決方案,需要的朋友可以參考下2023-02-02
公眾中經(jīng)常會(huì)有這種場(chǎng)景,一些合同、協(xié)議等的頁(yè)面需要進(jìn)行下載,而且需要和頁(yè)面保持一致,下面這篇文章主要給大家介紹了關(guān)于Vue頁(yè)面生成PDF的最佳方法,需要的朋友可以參考下2022-05-05
vue雙擊事件2.0事件監(jiān)聽(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作
這篇文章主要介紹了vue雙擊事件2.0事件監(jiān)聽(點(diǎn)擊-雙擊-鼠標(biāo)事件)和事件修飾符操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了VUE腳手架下載和配置，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue下拉框加分頁(yè)搜索功能的實(shí)現(xiàn)方法
開發(fā)任務(wù)中有這樣一個(gè)需求，下拉框中需要展示超過5000條數(shù)據(jù)，甚至更多，這數(shù)據(jù)量直接整個(gè)頁(yè)面卡死了，就想到在下拉框中加分頁(yè)，下面小編通過實(shí)例代碼介紹下Vue下拉框加分頁(yè)搜索功能的實(shí)現(xiàn)，感興趣的朋友一起看看吧2022-11-11
vue通過elementUI組件實(shí)現(xiàn)圖片預(yù)覽效果
我們?cè)陂_發(fā)中經(jīng)常會(huì)遇到通過點(diǎn)擊某個(gè)按鈕或者文字實(shí)現(xiàn)圖片的預(yù)覽功能,這里我們分別介紹vue2和vue3里面如何實(shí)現(xiàn)圖片預(yù)覽方法,需要的朋友可以參考下2023-09-09
el-upload大文件切片上傳實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了el-upload大文件切片上傳實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03