對於使用 vue-cli 腳手架創建的前端項目,編譯發佈幾乎是必需操作,有的編譯只需要幾秒鐘,快如閃電,有的卻需要好幾分鐘,慢如蝸牛。如果是線上進行熱修復,那更是分秒必爭,網頁響應的速度直接影響了用戶體驗,用戶不會那麼有耐心長時間等着,讓你慢慢編譯。
網上流傳 vue-cli 一些優化配置,有些在新版本的 vue-cli 和 webpack3 已經不再需要了,有些是針對 webpack4 的。對於新版本的 vue-cli 和 webpack3,以下簡單配置優化後,即可大幅提升構建速度。
- 按需引用及動態路由
- 啓用 uglifyjs-webpack-plugin 緩存
- 關閉 source-map
- 利用 DllPlugin 和 DllReferencePlugin 提取公用庫
一、動態路由
1、修改 srcrouterindex.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、修改 buildwebpack.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 // 緩存
}),
三、關閉 source-map
修改 srcconfigindex.js 中 productionSourceMap 值
productionSourceMap:false
四、公用庫提取
1、安裝 clean-webpack-plugin add-asset-html-webpack-plugin
yarn add clean-webpack-plugin [email protected] --dev
2、build 目錄下創建 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 設置爲 production 減少依賴
module.exports = {
entry: { // 把 vue 相關模塊的放到一個單獨的動態鏈接庫
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) // 設置環境變量
}
}),
new webpack.DllPlugin({
name: '_dll_[name]', // manifest.json 描述動態鏈接庫包含了哪些內容
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 命令
"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 文件即可,下次構建時不必運行
yarn run build