怎么優(yōu)化vue-cli2的構建速度？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

專注于為中小企業(yè)提供成都網(wǎng)站建設、網(wǎng)站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)麻陽免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復雜的單頁應用。

一、動態(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 // 緩存
}),

三、關閉 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 設置為 production 減少依賴

module.exports = {
 entry: { // 把 vue 相關模塊的放到一個單獨的動態(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) // 設置環(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 構建命令

"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

關于怎么優(yōu)化vue-cli2的構建速度問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關知識。